perspective属性必须作用于父容器并配合transform-style: preserve-3d才能生效，值越小透视感越强；rotate3d比rotateX/Y/Z更稳定可控；translateZ失效常因父容器未设preserve-3d或触发层叠上下文。
perspective 属性必须作用在父容器上，而不是变换元素本身
很多人一上来就给要旋转的 div 加 perspective: 1000px，结果完全没透视效果——这是因为 perspective 不是变换属性，它定义的是「观察者到 z=0 平面的距离」，必须施加在包含子元素的父级容器上，且该父容器需启用 transform-style: preserve-3d 才能让子元素真正参与 3D 空间渲染。
常见错误写法：.box { perspective: 1000px; transform: rotateY(45deg); } → 无效
正确结构示例：
.scene {
perspective: 1000px;
}
.scene .box {
transform-style: preserve-3d;
transform: rotateY(45deg);
}
-
perspective值越小（如200px），透视感越强、近大远小越明显；值越大（如3000px）越接近正交投影，显得“平” - 不要在同一个元素上同时写
perspective和transform，除非你明确需要该元素作为独立透视根（极少见） - 移动端 Safari 对
perspective在body或html上的表现不一致，建议始终包裹一层明确的.scene容器
rotateX/rotateY/rotateZ 和 rotate3d 的区别直接影响轴向控制精度
rotateX(45deg) 看似简单，但它绕的是「当前元素自身的局部 X 轴」，而这个轴会随之前变换发生旋转（比如先 rotateY(30deg) 再 rotateX(45deg)，X 轴已不是页面水平方向）。想稳定绕全局坐标轴旋转，得用 rotate3d(x, y, z, a)。
例如：绕屏幕垂直轴（即用户视角的 Y 轴）恒定旋转，应写 rotate3d(0, 1, 0, 45deg)，而非 rotateY(45deg) —— 后者在嵌套变换中容易偏移。
立即学习“前端免费学习笔记（深入）”；
-
rotate3d(1, 0, 0, θ)≡rotateX(θ)，但前者更可控，尤其配合 JS 动态计算时 - 多个
rotate3d连续使用会叠加，注意顺序：CSS 中transform是从右到左执行，rotate3d(0,1,0,30deg) rotate3d(1,0,0,20deg)表示先绕 X 转再绕 Y 转 - 避免混用
rotateY和rotate3d，浏览器解析逻辑不同，可能导致意外交互
z 轴位移（translateZ）失效？检查是否触发了层叠上下文或丢失 3D 渲染上下文
写了 transform: translateZ(100px) 却看不出前后变化，大概率是因为父容器没设 transform-style: preserve-3d，或者被 overflow: hidden / opacity: 0.99 / filter 等属性意外触发了新的层叠上下文，导致子元素被“拍平”回 2D。
- 只要父容器有
transform-style: flat（默认值）或未声明该属性，所有子元素的 z 值都会被忽略，强制压平到 z=0 -
position: fixed元素在 3D 场景中行为异常，部分浏览器会脱离 3D 上下文，改用position: absolute+transform更稳妥 - Chrome DevTools 的「Layers」面板可直观查看哪些元素实际生成了 3D 层，比肉眼判断可靠得多
动画卡顿或闪烁？优先用 will-change 和 GPU 加速策略
3D 变换本应由 GPU 加速，但若浏览器判定该元素不常变动，可能仍走 CPU 渲染。尤其在滚动中触发动画时，transform: rotateY(...) 频繁重算会导致掉帧。
- 对动画元素加
will-change: transform，提前提示浏览器“这个元素要动”，触发图层提升（但别滥用，每个都加反而降低性能） - 避免在动画中同时修改
top/left和transform，两者混合会强制重排（reflow） - 安卓 WebView 和旧版 iOS Safari 对
perspective+backface-visibility组合支持不稳定，加backface-visibility: hidden可减少闪烁，但也可能遮挡本该可见的背面内容
真实项目里，最易被忽略的是 transform-style 的继承断层和 perspective 的作用域层级——这两个点一旦错，整个 3D 效果就“看起来像没写”。
