transform-style: preserve-3d是3d空间存在的前提，必须设在直接包裹3d子元素的父容器上以保留其z轴坐标；它需配合父级perspective属性才能呈现透视深度，缺一则3d效果失效。
它不是“锦上添花”，而是 3D 空间存在的前提——没它，所有子元素的 Z 轴坐标全被拍平，rotateX()、translateZ() 都只是二维错觉。
transform-style: preserve-3d 的作用不是“开启3D”，而是“保留子元素的3D坐标”
浏览器默认把每个元素及其子元素都压在一个 Z=0 的平面上渲染（transform-style: flat）。哪怕你给子元素写了 transform: translateZ(100px)，它也不会真往前移——只是被强制投影回平面，视觉上等价于 translateX() 或 scale()。
transform-style: preserve-3d 告诉浏览器：别 flattening 这个容器的子元素，让它们各自保有自己的 X/Y/Z 坐标，参与同一套 3D 空间计算。
- 它必须设在**直接包裹 3D 子元素的父容器**上，比如立方体的
.cube、翻转卡片的.card或场景容器.scene - 不能靠继承：父级设了
preserve-3d，子级若再嵌套 3D 元素（如立方体的某个面还要旋转），仍需单独设置 - 值只有两个：
flat（默认）和preserve-3d；没有中间态，也没有auto
为什么加了 preserve-3d 还没 3D 效果？大概率缺 perspective
transform-style: preserve-3d 只管“坐标是否保留”，不管“有没有透视”。没有 perspective，Z 轴数值只是数学存在，投影后依然落在同一平面——就像用正交相机拍立方体，永远看不出深度。
-
perspective必须设在preserve-3d容器的**直接父级**（通常是同一个元素），不能写在 body 或子元素上 - 常见错误：
.card { transform-style: preserve-3d; perspective: 1000px; }❌ ——perspective对自身无效，得写在.card-container上 ✅ - 值太小（如
perspective: 50px）会导致近处元素剧烈放大、远处消失；太大（如9999px）趋近于无透视，translateZ(50px)和translateZ(200px)几乎看不出区别
preserve-3d 在 iOS 和 Firefox 上的兼容雷区
iOS Safari（尤其 15.4 之前）和旧版 Firefox 对 preserve-3d + perspective 组合极其敏感，稍有不合规就直接降级为 flat 渲染。
- iOS：若父容器同时用了
position: fixed或will-change: transform，整个 3D 上下文会被强制关闭，哪怕属性全对也白搭 - iOS：必须加
-webkit-transform-style: preserve-3d，仅写标准属性在部分机型上无效 - Firefox：对
perspective-origin默认值处理不一致，rotateY(-180deg)翻转可能呈现“向上掀”而非“向内翻”，显式声明perspective-origin: 50% 50%更稳 - 验证是否真正生效：打开 Chrome 或 Safari DevTools → Layers 面板，看到带网格线的 3D 图层框才说明流程启动
文字模糊？preserve-3d 不是解药，反而是帮凶
很多人误以为加 transform-style: preserve-3d 能“修复”动画中文字模糊，实际恰恰相反：它更容易触发多层 GPU 合成，让文字被裹进多个图层，抗锯齿层层衰减，糊得更彻底。
- 文字区域一旦被标红在 Layers 面板里，说明已进入 GPU 合成——这时调任何
preserve-3d都无济于事 - 真正要做的：确保文字本身不带
transform、opacity、filter；用isolation: isolate隔离其父容器；动效改用color、font-size等不升层属性 - 哪怕只对文字做
scale(1.01)，GPU 缩放也会绕过字体光栅化路径，亚像素信息直接丢失
复杂点在于：3D 效果是否成立，不取决于你写了多少个 transform 属性，而取决于浏览器是否真按三维坐标系调度图层。preserve-3d 是开关，但这个开关背后连着透视、层级、兼容性三根线，断一根，整个 3D 就塌了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
