css - 3D CSS + float 元素 - float 在 3D 转换之上

Question

我正在做一个日历小东西，在日期上进行 3D 变换/过渡。当你悬停时，它们应该像一扇小门一样打开。我已经完成了这么多工作。

这是我的问题:在日历中，下一行的日期与小门效应重叠。基本上看不到3d效果的底部。我将重叠的 li 设为半透明，因此您可以看到门的底部就在那里，只是被遮住了。

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

这里有一些 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 的边界位于内容之上的问题。

为了解决这个问题，我对其进行了调整，以便在 li 上有一个过渡，但在 li:hover 上没有。这样，就有一个过渡回到到 2D，但在 3D 效果发生时没有。 li:hover 上唯一需要调整的是 z-index。实际的 3D 发生在 li 内部的 a 上，所以只要关门效果比 z-index 变化短，边框就不会可见通过门。

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

Answer 1

尝试添加 position:relative 以及 z-index