CSS3怎么让元素按Z轴排列_transformstylepreserve3d【详解】_技术教程

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，那它什么也不会做。