也许我在CSS3中发现了一个Bug，或者这是一个简单的错误...
这是我正在处理的页面：
http://robocup2014.herokuapp.com/views/view/52e9bbb2e22d2402003d1ef1
我可能无法显示该错误，因为它的行为是完全随机的...但是，这是发生的情况：
该标志应始终位于该紫色布局的后面。但是，它有时在顶部，有时在下面。有时，它位于顶部而位于其下方（没有在javascript上运行的任何代码），或者它位于顶部而出乎意料。有时，在进行动画处理时，它位于下方，然后在动画的结尾处位于顶部，但是后来，它位于下方。
我的意思是：它是随机的，它是一个无聊的错误，没有任何模式。 （我已经计算了时间，计算了动画的迭代次数...）。
那么，有谁知道如何防止这种情况发生？这是一张图片，以防在您的窗口中出现错误。 （在Safari和Chrome上发生）
最佳答案
我最近不得不弄清楚同样的问题，而transform: translate3d(0,0,0);解决方案对我却不起作用。
事实是z-index只是将元素堆叠在2D世界中，因此，由于您使用3D转换，因此z-index无法应用。
所以真正的问题是恕我直言：
如何在3D世界中堆叠元素？
答：
使用Z轴！
这样做很简单，但是由于浏览器的呈现而不直观。我做了一个JSFiddle试图说明它。我试图通过您的页面中的代码来尽可能地匹配您的情况，这很难。在这个小提琴中，您有四个（2行2行）标记。我做了另外2个div（分数），表示应位于其他元素之上的元素。第一行不是越野车，而第二行不是。
要查看该错误，您只需将光标移到某个元素上，就知道该光标位于该标志上的css pointer和css col-resize中。您会看到，当您将绿色元素从左向右悬停时，光标会发生变化。
我提出了一些模式（是的，它们很丑陋；））来说明问题。这是我们浏览器所表示的元素（在我看来）：
我认为问题现在更容易看到。在右边，绿色就是蓝色，这就是我们想要的。但是，在左侧，rotateY()导致蓝色元素“离开屏幕”，越过绿色元素。如果不清楚，请从上方查看此视图：
我们可以认为蓝色元素超出了屏幕尺寸的一半。因此，我找到了解决方案（我认为这可能不是最佳解决方案，但这项工作有效，并且是跨浏览器的，因为您使用浏览器自己的transform实现，例如-webkit-transform。
滚动到小提琴的第二行，将鼠标悬停在绿色元素上，然后看到光标保持不变，但是我们将光标pointer完全丢在了蓝色元素上。我“只是”将Z轴上的蓝色元素转换为-10000px，以确保它很远并且旋转时不会“离开屏幕”。注意这里重要的顺序，首先是平移，然后是透视图，最后是旋转：translate3d(0, 0, -10000px)。正如您在我的上一个架构（从上方）看到的：
现在，蓝色元素距离较远，不会越过绿色元素。我们可以看到的最后一个问题是，如果蓝色元素大于10000像素，它将再次超过绿色元素。
总之，我确信此解决方案比实际解决方案更能解决问题。但这对我来说很有用，希望我不会摆脱您最初的问题，对您有帮助。
关于javascript - CSS3转换具有随机的z-index/depth，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21514724/