perspective必须设在父容器上且配合transform-style:preserve-3d才生效，单独加在动画元素自身无效；它为子元素创建共享3D观察空间，值通常取500px–3000px，过小易失真，过大趋近正交投影。
perspective 必须写在父容器上，不能直接加在动画元素自身
很多人一上来就给要旋转的 .cube 元素加 perspective: 1000px，结果发现没效果——因为 perspective 是为“后代元素”创建 3D 视角的，它本身不作用于自己。真正起效的位置是它的父级容器，比如 .scene 或 .container。
常见错误现象：transform: perspective(1000px) rotateY(45deg) 看起来有旋转，但没有深度感，所有面都像贴在同一平面上；这是因为 perspective() 作为 transform 函数时只影响该元素自身的绘制平面，不提供真正的 3D 空间上下文。
-
perspective属性应设在包含 3D 子元素的**最近共同父容器**上（如.scene） - 数值通常在
500px～3000px之间：值越小，透视越夸张，近处变形越强；值越大，越接近正交投影，适合 UI 控件类动画 - 避免同时在父容器和子元素上设置
perspective，会造成视角冲突，渲染不可预测
transform-style: preserve-3d 是 3D 空间的“开关”
即使设置了 perspective，如果子元素的父级没开 transform-style: preserve-3d，所有子元素仍会被压平到同一 Z=0 平面，旋转后看起来像一张纸在翻动，而不是立体结构。
典型使用场景：立方体六个面、卡片翻转、LED 数字轮播——这些都需要每个子元素保持独立的 Z 坐标位置。
- 必须加在**直接包裹 3D 子元素的容器**上（例如
.cube元素，而非最外层.scene） - 不要写成
transform-style: flat或遗漏该声明，这是 90% 的“3D 不生效”问题根源 - 注意兼容性：
preserve-3d在 Safari 旧版本和部分安卓 WebView 中支持不稳定，可加-webkit-transform-style: preserve-3d
perspective-origin 决定“你从哪看”，不是可有可无的装饰
默认 perspective-origin: 50% 50% 表示从正中心观察，但很多真实动效需要偏移视角才能强化空间错觉。比如悬浮卡片“浮起”时，若视角略偏上，阴影拉伸方向更自然；立方体旋转时，把原点设在 50% 0（顶部中央），能模拟“俯视”效果。
容易踩的坑：改了 perspective-origin 却没同步调整 transform-origin，导致旋转轴心和观察点错位，动画显得“晃”或“卡顿”。
-
perspective-origin影响的是整个 3D 空间的观察基准点，单位支持百分比、像素、关键词（left/top等） - 常用调试组合：
perspective-origin: 50% 20%+transform-origin: 50% 50%可让旋转更聚焦于上半区域 - 移动端慎用负值（如
-100% -100%），某些浏览器会触发渲染异常或裁剪
GPU 加速不是自动的，得靠 will-change 或 transformZ 触发
3D 动画卡顿，往往不是逻辑问题，而是浏览器没启用 GPU 渲染。仅靠 transform: rotateY() 不足以保证硬件加速——尤其在低端设备上。
性能影响明显：未开启 GPU 加速时，复杂 3D 场景帧率可能跌至 20fps 以下；加上正确触发后，稳定 60fps 很常见。
- 最稳妥方式：给动画容器加
will-change: transform（注意只在需要时添加，避免滥用） - 兼容性兜底：在
transform链中加入translateZ(0)，强制创建合成层（如transform: rotateY(45deg) translateZ(0)） - 避免对
perspective本身做动画——它不触发合成，且频繁重排会导致严重掉帧
perspective 和 transform-style 必须分层设置、缺一不可。很多人调了三天动画没立体感，最后发现只是少了一行 transform-style: preserve-3d。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
