Javascript CSS3变换具有随机z索引/深度

也许我在CSS3中发现了一个Bug，或者是一个简单的错误

以下是我正在处理的页面：

我可能无法显示错误，因为它的行为完全是随机的。。。但事情是这样的：

旗帜应始终位于紫色布局的后面。然而，它有时在上面，有时在下面。有时它在上面，在下面（没有任何代码在javascript上运行），或者它在上面，出乎意料。有时，当它设置动画时，它位于下方，然后在动画结束时位于上方，但稍后，它位于下方

我的意思是：它是随机的，是一个无聊的bug，没有任何模式。（我数过时间，数过动画……）

那么，有人知道如何防止这种情况吗？这是一张图片，以防在您的窗口中出现错误。（发生在Safari和Chrome上）

---

您能与我们共享浏览器版本吗？我没有在最新版本的Chrome、Safari或Firefox上看到它

这可能与此错误有关：

您可以尝试将其添加到平面项目：

transform:translate3d（0,0,0）

这样一来，他们都将被视为三维元素，并减少了看到错误的机会

此外，您应该使用所有浏览器前缀。我根本看不到Firefox上的转换，因此我无法判断这是否也是该浏览器上的问题。
您能与我们共享浏览器版本吗？我没有在最新版本的Chrome、Safari或Firefox上看到它

这可能与此错误有关：

您可以尝试将其添加到平面项目：

transform:translate3d（0,0,0）

这样一来，他们都将被视为三维元素，并减少了看到错误的机会

此外，您应该使用所有浏览器前缀。我根本看不到Firefox上的转换，因此我无法判断这是否是该浏览器上的问题。
我无法在Chrome、Safari或Firefox中重现该漏洞。
我在stackoverflow中发现了一个类似的问题，可能适用于您的案例（）

不过，我建议在触发滑动事件之前使用一些Javascript，以便计算z索引并在“紫色块”上应用更高的值，甚至完全放弃CSS转换，只使用Javascript转换。
我无法在Chrome、Safari或Firefox中重现此错误。
我在stackoverflow中发现了一个类似的问题，可能适用于您的案例（）

我建议在触发滑动事件之前使用一些Javascript，以便计算z-index，并在“紫色块”上应用更高的值，甚至完全放弃CSS转换，只使用Javascript转换。
我最近不得不解决同样的问题，并且
转换：translate3d（0,0,0）解决方案对我不起作用

事实上，z-index只是在二维世界中堆叠元素，因此，由于使用三维变换，z-index无法应用

所以真正的问题是IMHO：

如何在3D世界中堆叠元素？

答复:

使用Z轴

这虽然简单，但由于浏览器的渲染，并不直观。我做了一个尝试来说明它。我试图尽可能多地匹配您的情况，这很难，只需通过页面中的代码即可。在这把小提琴中，有四个（2对2线）旗子，如。我做了另外两个div（score），表示一个元素，它应该超过其他元素。第一行是马车，第二行不是

要查看错误，只需将光标移动到元素上，就可以知道光标是标志上的css
pointer
，css
col resize
。可以看到，当将绿色元素从左向右悬停时，光标会发生变化

我制作了一些模式（是的，它们很难看；）来说明这个问题。以下是我们的元素（在我看来）应该通过浏览器来表示：


我认为问题现在更容易看出来了。在右边，蓝色上方的绿色元素，这就是我们想要的。但是，在左侧，
rotateY（）
导致蓝色元素“走出屏幕”，越过绿色元素。如果不清楚，请查看“从上方”的视图：


我们可以认为蓝色元素会以其大小的一半离开屏幕。因此，我找到的解决方案（我认为这可能不是最好的解决方案，但这是可行的，而且是跨浏览器的，因为您使用浏览器自己的
转换
，例如
-webkit transform
）

滚动到小提琴的第二行，将绿色元素悬停，看到光标保持不变，但我们完全失去了蓝色元素上的光标
指针
。我“刚刚”将Z轴上的蓝色元素转换为-10000px，以确保它离屏幕很远并且不会“走出屏幕”注意这里重要的顺序，首先是平移3d（0,0，-10000px）
，然后是透视图，最后是给出它的旋转：
transform:translate3d（0,0，-10000px）透视图（1200px）rotateY（-45度）；
。正如我在上一个模式中看到的那样（从上面）：


蓝色元素现在离绿色元素很远，不会超过绿色元素。我们可以看到的最后一个问题是，如果蓝色元素大于10000像素，它将再次超过绿色元素

总而言之，我确信这个解决方案与其说是一个真正的解决方案，不如说是一个变通办法。但在我的情况下，它是有用的，我希望我不会放弃你最初的问题，这会对你有所帮助。
我最近不得不解决同样的问题，而
transform:translate3d（0,0,0）；
解决方案对我不起作用

事实上，z-index只是在二维世界中堆叠元素，因此，由于使用三维变换，z-index无法应用

所以真正的问题是IMHO：

如何在3D世界中堆叠元素<