transform-style: preserve-3d 失效主因是父容器未设非none transform（如translateZ(0)）或被overflow:hidden/filter等中断3D上下文，必须逐层确保preserve-3d+有效transform共存且无降级属性。
transform-style: preserve-3d 为什么加了没效果？
绝大多数时候，transform-style: preserve-3d 失效不是写错了，而是父元素“拦腰截断”了 3D 渲染上下文。浏览器只在满足特定条件时才真正启用子元素的 3D 空间——父容器必须同时满足：transform-style: preserve-3d + 有非 none 的 transform（哪怕只是 translateZ(0)）。
常见错误现象：div 套 div，内层设了 rotateY(45deg)，外层只写了 transform-style: preserve-3d 却没加任何 transform，结果内层仍被压平成 2D。
- 必须给父容器加一个“触发 transform”的声明，例如
transform: translateZ(0)或transform: rotateX(0) - 父容器不能有
overflow: hidden、filter、opacity < 1等会创建新层叠上下文且破坏 3D 渲染的属性 - Chrome/Firefox 支持良好，但 Safari 对嵌套过深或含
will-change的组合有时会退化为flat
preserve-3d 和 flat 的实际渲染差异
transform-style: flat（默认值）会让所有子元素先各自扁平化到父容器的平面，再整体做变换；而 preserve-3d 允许子元素在父容器定义的 3D 坐标系中保持各自 Z 轴位置，彼此之间能真实遮挡、透视相交。
举个典型场景：做一个翻转卡片，正面和背面都用 position: absolute 叠在一起。如果父容器是 flat，翻转时两面会“粘连”或错位；设为 preserve-3d 后，配合 transform: rotateY(180deg) 才能实现自然翻转。
立即学习“前端免费学习笔记（深入）”；
- 检查是否真有 Z 轴深度：子元素需显式设置
transform: translateZ(50px)或rotateX(30deg)等带 Z 分量的操作 - 透视必须由祖先级（通常是父容器的父级）通过
perspective属性提供，transform-style本身不提供透视 - 用 Chrome DevTools 的 3D 视图（Rendering 面板 → “Show 3D view”）可直观验证是否进入 3D 渲染流程
代码示例：最小可运行的 preserve-3d 结构
下面这段 HTML/CSS 是能稳定触发 3D 渲染的最简结构，复制即用：
<div class="scene">
<div class="card">
<div class="face front">Front</div>
<div class="face back">Back</div>
</div>
</div>
<p><style>
.scene {
perspective: 1000px; /<em> 必须加在祖先上 </em>/
}
.card {
width: 200px;
height: 200px;
transform-style: preserve-3d; /<em> 关键：开启子元素 3D 上下文 </em>/
transform: rotateY(0deg); /<em> 必须有 transform，哪怕初始为 0 </em>/
transition: transform 0.6s;
}
.card:hover {
transform: rotateY(180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /<em> 防止背面透出 </em>/
}
.front {
background: #4CAF50;
}
.back {
background: #2196F3;
transform: rotateY(180deg); /<em> 绕 Y 轴翻转 180°，让背面朝前 </em>/
}
</style>Safari 和移动端的兼容性注意点
iOS Safari 对 transform-style: preserve-3d 的支持较保守，尤其在 flex 容器、position: sticky 父级或使用 will-change: transform 时容易静默降级为 flat。
- 避免在
display: flex的直接子元素上设preserve-3d，建议额外包一层div并设display: block - 不要依赖
will-change来“优化” 3D 动画，它反而可能干扰渲染管线，Safari 下尤其明显 - 移动端若出现闪烁或跳变，尝试给父容器加
transform: translateZ(0)强制硬件加速，但仅限必要时——滥用会导致内存占用升高
真正难调试的永远不是怎么写，而是哪一层悄悄中断了 3D 上下文链。逐层检查 transform-style、transform、perspective 和层叠上下文属性，比反复改子元素更有效。
