perspective必须写在父容器上，否则3D效果不生效；它只对直系子元素起作用，定义观察者到z=0平面的距离，值需为px等绝对单位且不能为0或负数，推荐500–2000px。
perspective 必须写在父容器上，否则 3D 效果不生效
直接给要旋转或位移的元素（比如 .card）加 perspective: 800px 是无效的——它不会产生任何近大远小效果。因为 perspective 定义的是「观察者眼睛到 z=0 平面的距离」，只对它的**直系子元素**起作用。
常见错误现象：.card { perspective: 800px; transform: rotateY(45deg); } → 卡片像纸片一样平转，没有纵深感；多个 3D 元素各自独立变形、互不协调。
- 正确结构：用一个明确的包裹容器（如
.scene），.scene { perspective: 800px; } - 别偷懒写在
body或html上——移动端 Safari 对它们的支持不稳定，容易失效 - 如果 DOM 嵌套深（如
.scene > .wrapper > .cube > .face），仅.scene设perspective只能让.wrapper受益；.cube和.face要继续有 3D 空间，得靠各自父级设transform-style: preserve-3d
transform-style: preserve-3d 是 translateZ 生效的前提
translateZ(100px) 写了却没变化？大概率是父容器没设 transform-style: preserve-3d。浏览器默认把所有子元素拍平到父元素 XY 平面，Z 坐标被忽略，translateZ 就等于没写。
典型表现：多个子元素同时用 translateZ 拉远，但看起来像叠在一起，没有前后层次。
立即学习“前端免费学习笔记（深入）”；
- 必须加在设置了 3D 变换的父元素上（如
.cube），不是最外层.scene - 如果子元素（如
.face）内部还要嵌套带rotateX的图标，那.face自身也得加transform-style: preserve-3d - 旧版 Safari 需补
-webkit-transform-style: preserve-3d - 别和
backface-visibility: hidden混用：backface-visibility应加在每个需隐藏背面的子元素（如.face）上
perspective 值不是越大越好，translateZ 不能 ≥ perspective
perspective 不是“调高就更立体”，它决定 Z 轴位移是否落在有效视锥内。值太小，稍一移动就穿模；值太大，Z 轴缩放几乎不可见。
关键限制：translateZ 的绝对值一旦 ≥ perspective 值，元素就会不可见——它已移动到观察者后方，无法投影到屏幕。
-
perspective: 300px：适合强动感卡片翻转，但translateZ(400px)会消失 -
perspective: 1200px：接近人眼正常视距，rotateY(30deg)自然，适合 UI 层级浮起 -
perspective: 3000px：接近正交投影，Z 轴变化只剩位置偏移，适合精确对齐 -
perspective只接受绝对长度单位（px、rem），不支持%或em
rotateY 和 rotate3d 的行为差异影响轴向控制精度
rotateY(45deg) 绕的是元素自身的局部 Y 轴，而这个轴会随之前变换发生旋转。比如先 rotateX(30deg) 再 rotateY(45deg)，Y 轴已不是页面垂直方向，结果容易偏移。
想稳定绕全局坐标轴旋转（例如始终绕用户视角的竖直轴），得用 rotate3d。
-
rotate3d(0, 1, 0, 45deg)≡ 稳定绕屏幕 Y 轴旋转，等效但更可控 -
rotate3d(1, 0, 0, θ)≡rotateX(θ)，但在 JS 动态计算或嵌套变换中更可靠 - CSS 中
transform执行顺序是从右到左，rotate3d(0,1,0,30deg) rotate3d(1,0,0,20deg)表示先绕 X 转再绕 Y 转 - 避免混用
rotateY和rotate3d，不同解析逻辑可能导致意外交互
perspective，就没有观察基准；没有 transform-style: preserve-3d，Z 坐标就不存在；而 translateZ 的值一旦超出 perspective 定义的视锥范围，元素就真的看不见了。 
