transform-style: preserve-3d 没生效最常见原因是父容器未设置该属性或中间某层被重置为 flat，导致子元素3d变换被拍平；z-index在preserve-3d中失效，渲染顺序由z坐标决定；backface-visibility: hidden和合理perspective值对正确遮挡至关重要。
为什么 transform-style: preserve-3d 没生效？
最常见原因是父容器没设 transform-style，或者中间某层被重置成了 flat。浏览器默认所有元素都是 transform-style: flat，这意味着子元素的 3D 变换会被“拍平”到父元素的平面，彻底丢失深度信息。
- 必须在直接包含 3D 子元素的父容器上设置
transform-style: preserve-3d - 只要父链中任意一层漏设、或显式设为
flat（比如某些 css 框架重置了该属性），3D 层级就断了 -
perspective不影响transform-style是否生效，它只决定透视强度；没设perspective也能看到 3D 效果，只是无透视感
z-index 在 3D 变换后还管用吗？
基本不管用——一旦元素参与了 preserve-3d 环境中的 3D 变换，渲染顺序就由它们在 3D 空间中的实际 z 坐标决定，z-index 被完全忽略。
-
z-index只对同属一个 stacking context 且未启用 3D 的元素起作用 - 两个都启用了
preserve-3d的兄弟元素，谁更靠近观察者（即变换后z值更大），谁就在前面，跟 HTML 顺序、z-index都无关 - 如果想强制某元素前置，别调
z-index，改它的translateZ()或整体transform中的z分量
旋转后元素互相穿模/遮挡错乱
本质是 3D 渲染顺序计算失败，通常因为：没有给参与旋转的元素设置 backface-visibility: hidden，或容器未设 perspective 导致深度判断失准。
-
backface-visibility: hidden不仅隐藏背面，更重要的是告诉浏览器：“这个面不可见”，从而触发正确的背面剔除和深度排序 - 即使视觉上看不到背面，不设它也可能导致两个旋转面在交叠区域出现“闪烁”或“错层”
-
perspective建议设在共同父容器上（而非每个子元素），值太小（如10px）会让 3D 感过强、遮挡关系不稳定；太大（如9999px）则接近正交投影，容易误判前后
chrome 和 safari 对 preserve-3d 的兼容性差异
Safari（尤其 ios 15–16）对 preserve-3d 的实现更严格，稍有不符合规范就会退回到 flat；Chrome 则相对宽容，有时“看起来正常”，实则底层已降级。
立即学习“前端免费学习笔记（深入）”；
- Safari 要求所有参与 3D 的元素必须有明确的
transform（哪怕只是transform: translateZ(0)），否则可能不触发 3D 上下文 - 避免在
preserve-3d容器内混用will-change: transform和opacity动画，Safari 下易触发渲染异常 - 真机调试比模拟器更可靠——iOS 模拟器常无法复现真实 3D 渲染问题
3D 遮挡不是靠堆样式参数调出来的，而是靠层级结构是否真正构成连续的 3D 空间。最容易被跳过的，是那个看似无关紧要的父容器上的 transform-style 声明。