3D 变换如何影响 z-index 堆叠顺序？

3D 变换和 Z 索引：解开谜团

在 CSS 中使用 webkit 变换时，特别是通过 translate3d，可能会出现不一致的情况z-index 的行为，影响元素的堆栈顺序。

在你的在这种情况下，您使用 translate3d 将两个重叠的 div 动画化并返回到屏幕上。然而，变换后，div 失去了规定的 z-index 优先级。

发生这种情况是因为当您在 z 轴上应用 3D 变换（即，translate3d 的第三个参数）时，传统的 2D z-index机制不再适用。在 3D 渲染平面中，层次结构由每个元素的 z 值决定，有效地覆盖 z 索引。

要纠正此问题，您有两个选项：

1. 切换到平面渲染：通过将transform-style属性设置为平面，您可以将子元素恢复为2D渲染。这会迫使浏览器再次对 z-index 值进行优先级排序。
2. 在 3D 中复制堆栈顺序： 不幸的是，translate3d 的第三个参数不会复制 3D 空间中的堆栈顺序。您需要手动调整每个元素的 z 值以实现所需的堆栈顺序。

其他上下文：

请参阅 WebKit 错误报告 (https ://bugs.webkit.org/show_bug.cgi?id=61824）了解更多

目标浏览器：

iPhone/iPad 和 Android 浏览器都支持 webkit 转换，因此您应该会看到问题在这些环境中得到解决。

以上是3D 变换如何影响 z-index 堆叠顺序？的详细内容。更多信息请关注PHP中文网其他相关文章！