perspective必须设在父容器上，且需配合transform-style: preserve-3d才能生效；前者定义观察距离影响直系子元素，后者保持子元素3d空间，二者缺一不可且须层级匹配。
perspective 必须写在父容器上，不是子元素本身
直接给要旋转的元素加 perspective: 1000px 是无效的——浏览器根本不会据此生成透视投影。因为 perspective 定义的是“观察者到 z=0 平面的距离”，它影响的是其**直系子元素**的 3D 渲染方式，而不是自身。
常见错误：.cube { perspective: 1000px; transform: rotateY(45deg); } → 子面（如 .face）依然被压平，没有近大远小。
- 正确做法：用一个明确的包裹容器（比如
.scene），在其上设置perspective - 该容器不能是
body或html—— 移动端 Safari 对它们的支持不一致，容易失效 - 如果 DOM 嵌套深（例如
.scene > .wrapper > .cube > .face），而你只在.scene上设了perspective，那么只有.wrapper能受益；.cube和.face需要各自父级也设transform-style: preserve-3d才能延续 3D 空间
transform-style: preserve-3d 是 Z 轴生效的前提
没有 transform-style: preserve-3d，所有子元素都会被强制拍平到父元素的 XY 平面，哪怕写了 translateZ(200px) 也毫无深度变化。
这个声明必须加在**设置了 3D 变换的父元素上**，比如立方体容器 .cube，而不是最外层的 .scene。
-
.scene { perspective: 1000px; }→ 提供观察视角 -
.cube { transform-style: preserve-3d; }→ 让六个面保有各自 Z 坐标 - 如果某个面（如
.face）内部还要放带rotateX的图标，那.face也得加transform-style: preserve-3d，否则图标又被压平 - 旧版 Safari 需补
-webkit-transform-style: preserve-3d
perspective 值大小直接影响视觉强度和可用范围
perspective 不是越大越好，也不是越小越“酷”。它决定了 Z 轴位移是否在有效透视范围内。
- 值太小（如
200px）：透视极强，边缘拉伸剧烈，适合短时交互动画（如卡片翻转），但translateZ(300px)可能已超出视锥，导致元素消失或缩成一点 - 值适中（如
800px–1200px）：平衡感好，多数translateZ(±100px)到±150px都能清晰呈现前后层次 - 值太大（如
3000px）：接近平行投影，Z 轴位移几乎看不出缩放，但适合 UI 层级暗示（如悬浮按钮轻微抬升） - 注意：
translateZ的正负必须匹配perspective值量级——若perspective: 500px，就别用translateZ(500px)，大概率不可见
rotateY/rotateX 容易绕错轴，优先用 rotate3d
单独写 rotateY(45deg) 看似方便，但它绕的是元素**当前局部坐标系**的 Y 轴。一旦前面有其他旋转（比如先 rotateX(30deg)），Y 轴方向就偏了，后续旋转会“歪”。
想稳定绕屏幕垂直轴（即用户视角的全局 Y 轴）旋转，应改用：
transform: rotate3d(0, 1, 0, 45deg);
-
rotate3d(x, y, z, a)中的(x,y,z)是旋转轴的方向向量，(0,1,0)恒指屏幕正 Y 方向 - 同理，绕屏幕水平轴用
rotate3d(1, 0, 0, a)，绕视线方向（Z 轴）用rotate3d(0, 0, 1, a) - 这种写法在嵌套变换、JS 动态更新 transform 时更可控，避免累积误差
perspective 和 transform-style: preserve-3d 的作用层级不匹配——前者管“看”，后者管“存”，缺一不可，且必须落在正确的 DOM 节点上。很多效果失败，不是代码写错了，而是这两个属性没对齐容器树的结构。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
