perspective必须设在父容器上，因它定义观察者到z=0平面的距离，仅对直系子元素生效；配合transform-style: preserve-3d才能保持子元素3D坐标系，且translateZ值不可≥perspective值，否则元素不可见。

直接给要动的元素加 perspective 没用——它必须写在**父容器**上，否则 rotateY、translateZ 等变换永远只是平面动画，没有近大远小的立体感。

为什么 perspective 必须设在父容器上

perspective 定义的是“观察者眼睛到 z=0 平面的距离”，它只对**直系子元素**生效。写在目标元素（比如 .cube）上，等于把眼睛贴在盒子表面，它的子元素（如 .face）根本得不到透视投影计算。

• 错误写法：.cube { perspective: 800px; transform: rotateY(45deg); } → 子面被压平，无深度
• 正确结构：外层加 .scene 容器，.scene { perspective: 800px; }，再把 .cube 放进去
• 别偷懒写在 body 或 html 上——移动端 Safari 对它们的支持不一致，容易失效

transform-style: preserve-3d 是 Z 轴生效的前提

没有这句，浏览器会把所有子元素强制拍平到父元素的 XY 平面，translateZ(100px) 就是摆设。

• 必须加在设置了 3D 变换的父元素上（如 .cube），不是最外层的 .scene
• 如果子元素（如 .face）内部还要嵌套带 rotateX 的图标，那 .face 也得加 transform-style: preserve-3d
• 旧版 Safari 需补 -webkit-transform-style: preserve-3d
• 别和 backface-visibility: hidden 混用：后者应加在每个需隐藏背面的子元素（如 .face）上

perspective 值怎么选才不翻车

值不是越大越好，也不是越小越“酷”。它决定 Z 轴位移是否落在有效视锥内，直接影响能否看见、是否变形。

立即学习“前端免费学习笔记（深入）”；

• perspective: 300px：视点极近，适合强动感卡片翻转；但 translateZ(400px) 会穿模消失
• perspective: 1200px：接近人眼正常视距，rotateY(30deg) 自然，适合 UI 层级浮起
• perspective: 3000px：接近正交投影，Z 轴缩放几乎不可见，适合精确对齐场景
• 关键限制：translateZ 的绝对值不能 ≥ perspective 值，否则元素不可见

嵌套深了怎么办

DOM 嵌套一多（比如 .scene > .wrapper > .cube > .face），光靠 .scene 设 perspective 不够——只有 .wrapper 能受益。

• .wrapper 若参与 3D 变换（比如整体平移），就得单独加 perspective
• .cube 和 .face 各自父级必须设 transform-style: preserve-3d 才能延续 3D 空间
• 但不建议无节制多层 preserve-3d，易引发渲染异常或性能抖动

最容易被忽略的其实是组合逻辑：没有 perspective，就没有观察基准；没有 transform-style: preserve-3d，Z 坐标就不存在；而 translateZ 的值一旦超出 perspective 量级，整个元素就从视觉中蒸发——三者缺一不可，且层级必须严丝合缝。