perspective必须写在父容器上才有效，因其定义观察者到z=0平面的距离，仅对直系子元素生效；直接加在旋转元素上无效，且移动端safari对body/html设perspective支持不稳定。
perspective 必须写在父容器上才有效
直接给要旋转的元素加 perspective: 800px 是无效的——它不会产生任何近大远小效果。因为 perspective 定义的是「观察者眼睛到 z=0 平面的距离」，只对它的**直系子元素**起作用。
- 错误写法：
.card { perspective: 800px; transform: rotateY(45deg); }→ 卡片平转，无纵深感 - 正确结构：用明确包裹容器，如
.scene { perspective: 800px; }，再让.card做子元素 - 别偷懒设在
body或html上——移动端 Safari 对它们的支持不稳定，容易失效 - 如果 DOM 嵌套深（如
.scene > .wrapper > .cube > .face），仅.scene设perspective只能让.wrapper受益；更深层需靠transform-style: preserve-3d延续空间
transform-style: preserve-3d 是 translateZ 生效的前提
translateZ(100px) 写了却没变化？大概率是父容器没设 transform-style: preserve-3d。浏览器默认把所有子元素拍平到父元素 XY 平面，Z 坐标被忽略，translateZ 就等于没写。
- 必须加在设置了 3D 变换的父元素上（如
.cube），不是最外层.scene - 典型表现：多个子元素同时用
translateZ拉远，但看起来像叠在一起，没有前后层次 - 如果子元素（如
.face）内部还要嵌套带rotateX的图标，那.face自身也得加transform-style: preserve-3d - 旧版 Safari 需补
-webkit-transform-style: preserve-3d
perspective 值不能乱填，要匹配 translateZ 量级
perspective 不是“调高就更立体”，它决定 Z 轴位移是否落在有效视锥内。值太小，稍一移动就穿模；值太大，Z 轴缩放几乎不可见。
- 关键限制：
translateZ的绝对值一旦 ≥perspective值，元素就会不可见——它已移动到观察者后方，无法投影到屏幕 -
perspective: 300px：适合强动感卡片翻转，但translateZ(400px)会消失 -
perspective: 1200px：接近人眼正常视距，rotateY(30deg)自然，适合 UI 层级浮起 -
perspective只接受绝对长度单位（px、rem），不支持%或em
rotateY/rotateX 容易绕错轴，优先用 rotate3d
单独写 rotateY(45deg) 看似方便，但它绕的是「当前元素自身的局部 Y 轴」，而这个轴会随之前变换发生旋转（比如先 rotateX(30deg) 再 rotateY(45deg)，Y 轴已偏移）。想稳定绕全局坐标轴旋转，得用 rotate3d。
-
rotate3d(0, 1, 0, 45deg)≡ 绕屏幕垂直轴恒定旋转，比rotateY(45deg)更可控 -
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 的层级绑定关系——它们不是“配对一次就万事大吉”，而是按 DOM 树逐级生效的。一个 translateZ 没反应，往往不是值错了，而是中间某一层父容器漏掉了 preserve-3d，或者意外触发了层叠上下文（比如 overflow: hidden、opacity: 0.99）。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
