perspective属性必须作用于父容器才生效，它定义观察者到子元素平面的距离；值越小透视感越强，需配合transform-style: preserve-3d保持子元素3D坐标系，且不可与transform同写一元素。
perspective属性必须作用在父容器上才能生效
很多人直接给要旋转的元素加 perspective，结果完全没透视效果——因为 perspective 不是变换属性，它定义的是观察者到 transform-style: preserve-3d 子元素所在平面的距离，必须设在**父级容器**上。
常见错误写法：div.box { perspective: 1000px; transform: rotateY(45deg); } → 无效
正确结构：
<div class="scene"> <div class="box"></div> </div>
.scene { perspective: 1000px; }.box { transform: rotateY(45deg); transform-style: preserve-3d; }
-
perspective值越小（如200px），透视感越强、近大远小越明显；值越大（如3000px）越接近正交投影 - 不能和
transform写在同一元素上“凑数”，否则会被忽略或触发层叠上下文干扰布局 - 若父容器有
overflow: hidden，旋转后超出的部分会被裁剪，需配合padding或min-height预留空间
transform-style: preserve-3d 是子元素保持3D坐标系的关键
没有它，子元素的 transform（比如 rotateX、translateZ）会全部被“拍平”到父容器的2D平面，失去深度关系。
典型现象：多个子元素同时用 translateZ 拉远，但看起来像叠在一起，没有前后层次。
- 只对直接子元素生效，嵌套更深的后代需逐级设置（但通常不推荐多层
preserve-3d，易引发渲染异常） - 和
backface-visibility: hidden配合使用可避免翻转后背面内容意外显示 - 部分旧版 Safari（iOS 9.3 之前）不支持
preserve-3d，此时子元素会退化为2D变换，需降级处理
rotateX/rotateY/rotateZ 的旋转轴方向容易混淆
旋转方向遵循右手定则，但实际调试时更依赖视觉反馈。记住三个锚点：
-
rotateX(45deg)：绕水平轴旋转，顶部向里、底部向外（像点头） -
rotateY(45deg)：绕垂直轴旋转，右侧向里、左侧向外（像摇头） -
rotateZ(45deg)：绕屏幕Z轴旋转，纯2D平面旋转，和rotate(45deg)效果一致
注意：transform 的执行顺序影响最终朝向。例如 rotateX(30deg) rotateY(45deg) 和 rotateY(45deg) rotateX(30deg) 结果不同——CSS按从左到右顺序应用变换，不是矩阵乘法交换律。
translateZ 调整景深时单位和符号很关键
translateZ 是沿Z轴移动，正值表示移向观察者（变大、变清晰），负值表示远离（变小、可能变虚——尤其配合 perspective 小值时）。
- 单位必须带（如
50px、-12rem），不能写translateZ(50)（无效） - 值过大（如
translateZ(5000px)）可能导致元素彻底移出视锥体而消失 - 与
perspective值存在比例关系：若perspective: 800px，translateZ(400px)相当于把元素拉到观察者一半距离处，缩放约 ×2；可用公式scale = perspective / (perspective - translateZ)估算
真正难调的不是语法，是让多个 translateZ + rotate 共同作用时，各元素在3D空间里的相对位置刚好符合预期——这需要反复微调，而不是靠一次计算搞定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
