Question

我正在制作一个小日历，在日期上进行3D变换/过渡。当你盘旋时，它们应该像一扇小门一样打开。我有这么好的工作。

这是我的问题：在日历中，下一行的日期与小门效果重叠。基本上，你无法看到3d效果的底部。我将重叠的li半透明，所以你可以看到门的底部是，只是模糊不清。

我认为这不是一个z-index问题，而是浮点数。我完全愿意以不同的方式定位日历日期，但这是我现在所能想到的。

这里有一些jQuery将降序的z-index应用于元素，但它没有做任何事情。即使它确实有效，我也觉得它会切断门效应的顶部。

Here's a jsFiddle the shows everything in action.请记得使用Safari或Chrome。

 $('.cal ul li').each(function(index) {
     var days = $('.cal ul').children('li').size();
     $(this).css('z-index',days - index);
 });

谢谢！我希望我没有超越3D css转换的能力。

修改

好的，我想我已经明白了。我在li:hover（天）上调整了z-index，这确保了它将在前台。我遇到了问题，li s的边框位于内容之上。

为了解决这个问题，我对其进行了调整，以便在li上进行转换，而不是li:hover。通过这种方式，可以将返回转换为2D，但不会在3D效果发生时转换为。 li:hover上唯一调整的是z-index。实际3D发生在a内的li内，因此只要门关闭效果比z-index更改短，就不会通过门看到边框。

这是展示一切的an updated jsFiddle。如果您发现任何进一步改进的方法，请告诉我。

Answer 1

尝试添加position:relative和z-index

3D CSS +浮动元素 - 浮动在3D转换之上

1 个答案: