z-index在3D场景中失效是正常现象，因浏览器按Z轴实际坐标（如translateZ值）而非z-index数值决定渲染顺序；需通过调整transform中的Z值精确控制前后关系。
z-index 在 3D 场景里根本不起作用——这不是 bug，是浏览器渲染机制决定的。真正控制前后顺序的，是元素在 Z 轴上的最终位置，而不是 z-index 数值。
为什么 z-index 在 3D 中完全失效
一旦父容器启用 transform-style: preserve-3d，子元素就脱离了常规层叠上下文。浏览器会根据每个元素变换后在 3D 空间中的 Z 坐标（由 translateZ()、rotateX() 等生成）做投影计算，再按“离视点近的后绘制”规则合成画面。z-index 此时被忽略，哪怕设成 9999 也压不住 translateZ(-20px) 的元素。
常见错误现象：
- 两个
.item都设置了transform: translateZ()，但视觉顺序和预期相反 - 加了
z-index: 100的元素仍被盖住，开发者反复调高数值无果 - 用
position: absolute+z-index提层，结果整个 3D 效果断裂、透视错乱
transform-style: preserve-3d 必须写在直接父容器上
这个属性不会向上或向下“穿透”。它只影响**直系子元素**是否保留自身 3D 坐标系。如果写在祖父级，中间父级没设，那子元素的 translateZ() 会被强制扁平化到父级平面，Z 值归零。
关键条件：
- 父容器必须显式声明
transform-style: preserve-3d（不能依赖继承） - 该父容器自身最好有
perspective（如perspective: 1000px），否则 3D 感弱 - 任何中断 3D 上下文的操作都会让子元素降级：比如父级用了
opacity: 0.99、filter: blur(1px)、overflow: hidden（部分浏览器） - 子元素必须自己带 Z 轴变换，例如
transform: translateZ(40px)或rotateY(30deg)，空transform不触发
用 translateZ() 精确控制深度顺序
要让 A 盖住 B，不是给 A 加 z-index，而是确保 A 的最终 Z 值比 B 更靠近观察者（即数值更大）。注意：这里说的是“投影后的 Z”，不是原始 translateZ() 值——受 perspective 和旋转角度影响，但通常正向增大 translateZ() 就能前移。
实操建议：
- 统一用
translateZ()控制层级，避免混用translate3d(x,y,z)和单独translateZ()导致理解偏差 - 多个同级元素，Z 值建议拉开差距（如
10px、50px、90px），别用1px、2px这种肉眼难辨的差值 - 若需某个元素“绝对置顶”，可配合
position: absolute+z-index单独提一层，但此时它已不在 preserve-3d 流程中，透视关系会断开 - Safari 等旧引擎对负 Z 值（如
translateZ(-100px)）渲染不稳定，优先用正值前移
容易被忽略的兼容性与性能细节
transform-style: preserve-3d 在 Safari 和部分 Android WebView 中仍需 -webkit-transform-style: preserve-3d 前缀；Chrome 120+ 已稳定支持无前缀写法。更隐蔽的问题是：一旦开启 preserve-3d，浏览器会为每个子元素创建独立合成层，大量使用会导致内存占用陡增、滚动卡顿。
所以实际项目中：
- 只在必要层级启用，不要全页面套
preserve-3d - 避免在高频动画元素上叠加过多 preserve-3d 父级（比如轮播图里每张图都套三层 3D 容器）
- 用
backface-visibility: hidden可减少重绘，但它本身不解决深度排序，且必须和 preserve-3d 父级共存才有效 - 调试时打开 Chrome DevTools → Rendering → “Paint flashing” 和 “Layer borders”，能直观看到哪些元素被提升为合成层、Z 值是否生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
