transform-style: preserve-3d 失效主因是父层中断3D上下文，须在直接父元素设置且子元素需有Z轴transform；z-index在3D中无效，前后关系由translateZ等决定。
为什么 transform-style: preserve-3d 没生效？
绝大多数情况下，不是写错了属性，而是父容器“中途截断”了 3D 渲染上下文。CSS 的 3D 变换必须逐层向上透传，只要中间任意一层设置了 transform-style: flat（默认值）或触发了新的 stacking context（比如 opacity: 0.99、will-change: transform、filter），其子元素的 preserve-3d 就会失效——浏览器直接降级为 2D 平面渲染，Z 轴信息被丢弃。
常见踩坑点：
- 父级用了
transform但没配transform-style: preserve-3d - 祖父级加了
opacity: 0.99或filter: blur(1px) - 父容器设置了
overflow: hidden（某些浏览器会隐式创建平面化层） - 使用了
backface-visibility: hidden但未配合preserve-3d父级
transform-style: preserve-3d 必须写在哪个元素上？
它只对**直接子元素**的 3D 变换起作用，且仅当该子元素自身也设置了 transform（如 translateZ()、rotateX()）。换句话说：要让 A 的子元素 B 在 Z 轴上正确排列，必须把 transform-style: preserve-3d 写在 A 上，而不是 B 或更外层。
典型结构示例：
立即学习“前端免费学习笔记（深入）”；
.container {
transform-style: preserve-3d;
perspective: 1000px;
}
.item {
transform: translateZ(50px); /* 这个 Z 值才真正参与 3D 排列 */
}注意：perspective 通常设在容器上（非必需但推荐），而 transform-style 是开启子元素 3D 上下文的开关，二者缺一不可。
Z 轴排列依赖 transform，不是 z-index
z-index 在 3D 场景中完全无效——它只作用于 stacking context 的 2D 层级。真正的前后关系由 transform: translateZ()、rotateX() 等生成的合成层深度决定。浏览器根据最终变换矩阵计算每个元素在 3D 空间中的 Z 坐标，再按投影后的位置进行绘制。
关键事实：
-
translateZ(100px)让元素“前移”，translateZ(-100px)“后退” - 多个子元素可以同时设置不同
translateZ()，它们会真实按 Z 值前后叠放 - 若想让某个子元素“盖住所有其他 3D 元素”，不能靠
z-index，而要确保它的transform产生的 Z 值在投影后最大（或用position: absolute+z-index单独提层，但这已脱离 preserve-3d 流程）
兼容性与性能提醒
transform-style: preserve-3d 在 Safari 15.4+、Chrome 12+、Firefox 16+ 支持良好，但 iOS Safari 旧版本（≤15.2）存在渲染闪烁或透视丢失问题；Edge 12–18 有部分 bug，建议加 -webkit-transform-style: preserve-3d 前缀。
性能方面：开启 3D 上下文会促使浏览器为元素创建独立图层（compositing layer），内存占用上升。如果只是简单叠加，不用真 3D，就别滥用 preserve-3d —— 一个 transform: translateZ(0) 就足以触发硬件加速，无需整套 3D 流程。
最常被忽略的一点：preserve-3d 不是“打开 3D 开关”的魔法，它只是告诉浏览器“请保留我孩子在 3D 空间里的坐标关系”。一旦你没给子元素写任何带 Z 的 transform，那它什么也不会做。
