加了transform-style: preserve-3d仍无3d效果，主因是缺少perspective（必须设在同级父容器上），导致z轴变换无透视投影，所有元素被拍平到同一平面；还需避免overflow:hidden、确保子元素有transform、ios需加-webkit前缀。
为什么加了 transform-style: preserve-3d 还没 3D 效果？
绝大多数情况不是属性写错了，而是浏览器压根没进入 3D 渲染流程——transform-style: preserve-3d 只是“允许子元素保留 Z 轴坐标”，它本身不产生透视、不定义观察点。没有 perspective，所有 translateZ()、rotateX() 都只是数学变换，投影后仍落在同一平面，视觉上就是平移或旋转，看不出深度。
perspective 必须加在哪个元素上？
必须加在 transform-style: preserve-3d 的**直接父容器**上（通常是同一个元素），且不能靠继承。常见错误是把 perspective 写在子元素或 body 上，结果子元素的 Z 值被忽略，全部拍平。
-
perspective值太小（如10px）：3D 感过强，元素容易“炸开”，遮挡关系错乱 -
perspective值太大（如9999px）：接近正交投影，translateZ(50px) 和 translateZ(100px) 看不出区别 - 推荐起始值：
perspective: 1000px，适配多数卡片/魔方类场景；移动端可下调至600px - Safari（尤其 iOS 15–16）对
perspective更敏感，值为0或none会直接退化为 flat
Firefox 中翻页动画方向反了，跟 perspective 有关吗？
有关。Firefox 对 perspective 的投影计算与 Chrome 存在细微差异，尤其在 rotateY(-180deg) 类翻转动画中：Chrome 默认以容器中心为视点，Firefox 可能更依赖 perspective-origin 的隐式值。不显式声明时，不同引擎默认 origin 不一致，导致同一 rotate3d() 在视觉上呈现“向上翻”还是“向内凹”。
- 统一设置
perspective-origin: center center，避免浏览器各自猜测 - 不要混用
perspective和transform: perspective()，后者作用域不同，易覆盖 - Firefox 对负 Z 值（如
translateZ(-50px)）渲染更保守，优先用正值前移 - 验证是否生效：打开 DevTools → Layers 面板，看到带透视网格线的图层框，才说明 3D 流程真正启动
iOS 上 preserve-3d 闪退或空白，加 perspective 就行？
不够。iOS（特别是 15.4 之前）对 perspective + preserve-3d 组合有硬性限制：若父容器同时用了 position: fixed 或 will-change: transform，整个 3D 上下文会被 Safari 强制降级，哪怕 perspective 值合法也无效。
- 必须加
-webkit-transform-style: preserve-3d和-webkit-perspective前缀，iOS 旧版只认这个 - 避免
overflow: hidden在 3D 容器上——部分 iOS 版本会因此截断图层合成 - 给每个参与 3D 的子元素显式加
transform: translateZ(0)，Safari 要求“可见变换”才触发上下文 - 如果用了
backface-visibility: hidden，务必确保它和preserve-3d在同一层级启用，否则 Safari 直接忽略
真正难处理的，是那些没报错、也没警告，但 Layers 面板里文字区域突然标红成独立 GPU 图层的时刻——那说明你加的 perspective 已经成功触发了 3D 合成，而字体模糊、闪烁、穿模等问题，全是从那一刻开始的连锁反应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
