perspective必须设在父容器上，因为其定义观察者到z=0平面的距离，仅对后代中开启3d上下文的元素生效；若设在子元素自身，则只产生局部透视，无法影响其子元素的纵深感。
必须在父容器上设 perspective，且子元素要加 transform-style: preserve-3d，否则所有 3D 变换都会塌陷成 2D 平面。
为什么 perspective 一定要写在父容器上？
浏览器渲染 3D 变换时，perspective 定义的是“观察者眼睛到 z=0 平面的距离”。这个值只对**后代中开启了 3D 上下文的元素**生效。如果写在子元素自身上（比如 transform: perspective(800px) rotateY(45deg)），它只会让该元素自己产生局部透视，无法影响其子元素——而立方体六个面恰恰是子元素。
常见错误现象：.cube 转起来了，但每个 .face 都像贴在一张纸上，没有远小近大的纵深感。
- ✅ 正确做法：在
.scene（包裹.cube的容器）上设perspective: 1000px - ❌ 错误做法：只在
.cube上写transform: perspective(1000px) - ⚠️ 注意：
perspective值不是越大越好；800–1200px 是较自然的范围，perspective: 200px会夸张变形，perspective: 5000px几乎看不出透视
transform-style: preserve-3d 不加就白忙
默认情况下，浏览器会对每个元素的变换结果“拍平”到 2D 平面再渲染，也就是丢弃 z 坐标。即使你写了 translateZ(100px)，它也只会在视觉上偏移，不参与真实 3D 空间计算。
所以 .cube 必须显式声明：transform-style: preserve-3d，告诉浏览器：“我下面的子元素要共用同一个 3D 坐标系”。否则六个面永远挤在同一平面，转不出立体感。
- 不加这句 → 所有
rotateX/Y/Z、translateZ行为都退化为视觉位移，无真实深度 - 加了之后，
.front的translateZ(100px)和.back的rotateY(180deg) translateZ(100px)才能真正分布在立方体前后两面 - 注意：该属性**不继承**，父元素设了，子元素不会自动获得；但一般只需设在直接包裹 3D 子元素的那层（如
.cube）
定位方式决定旋转锚点是否合理
3D 旋转围绕的是元素自身的 transform origin，默认是中心点（50% 50%）。但如果你用 position: absolute + top/left 移动了面，又没重设 transform-origin，旋转就会绕着左上角转，导致立方体“飘走”或错位。
典型场景：六个面都用 position: absolute 居中叠在一起，靠 transform 推到各自位置。此时它们的坐标原点仍是左上角，但 translateZ 和 rotate 都期望以中心为基准。
- ✅ 必须统一设
transform-origin: center或50% 50%在每个面（.face）上 - ❌ 别依赖默认值，尤其当面内有文字或图片时，
transform-origin: top left会让旋转看起来像在撕纸 - ? 小技巧：把
.cube设为position: relative，六个面设position: absolute; top: 0; left: 0; width: 100%; height: 100%，再用transform推开——这样所有面的原点对齐，旋转更可控
容易被忽略的 z-index 与渲染顺序
CSS 3D 中，z-index 在开启 preserve-3d 后基本失效。元素的前后关系由它们在 3D 空间中的 z 坐标决定，而不是 DOM 顺序或 z-index 值。
这意味着：即使你把 .back 写在 HTML 最前面，只要它的 transform 计算后 z 值比 .front 小（更靠近观察者），它就会盖住前面的面。
- ✅ 正确控制前后：靠
translateZ()值区分，例如.front { translateZ(100px) }，.back { rotateY(180deg) translateZ(100px) }—— 两者 z 值相同，但旋转后实际位置不同 - ❌ 不要指望
z-index: 999让某个面永远在最前；它只在未开启 3D 上下文或部分降级场景下起作用 - ⚠️ 特别注意：如果旋转角度导致某面 z 值变成负数（如
rotateX(90deg)后顶面朝向观察者背面），它可能完全不可见——这时需要检查backface-visibility: hidden是否启用
真正卡住人的往往不是语法写错，而是 perspective 放错了位置、preserve-3d 忘了加、或者六个面的 transform-origin 没对齐——这三个点漏掉任何一个，3D 效果就出不来立体感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
