perspective必须写在直接父容器上，因其定义观察者到z=0平面的距离，仅对直系子元素生效，且需与transform-style: preserve-3d同级配合才能建立3d渲染上下文。
加了 transform-style: preserve-3d 却没3D效果，90%不是写错了，而是浏览器压根没进3D渲染流程——它不自动开透视，也不继承父级的 perspective，更不认你随手加在 body 或子元素上的值。
为什么 perspective 必须写在直接父容器上？
浏览器只在「有 perspective 的元素」和「它的直接子元素（且该子元素设了 transform-style: preserve-3d）」之间建立3D上下文。这个关系不能靠继承，也不能跨层。
- 错例：
body { perspective: 1000px; }+.cube { transform-style: preserve-3d; }→ 无效，因为.cube不是body的直接子元素（中间可能隔了.wrapper） - 对例：
.scene { perspective: 1000px; }+.scene > .cube { transform-style: preserve-3d; }→ 有效 - DevTools 验证法：打开 Layers 面板，看到带透视网格线的图层框，才说明真启动了3D渲染
iOS 上 preserve-3d 闪退或空白怎么办？
iOS（尤其 15.4 之前）对 perspective + preserve-3d 组合有硬性限制，不是加前缀就能解决的。
- 必须加
-webkit-transform-style: preserve-3d，仅写标准属性在旧版 Safari 里会被忽略 - 禁用
position: fixed或will-change: transform：这两个声明会触发 Safari 强制降级整个3D上下文，哪怕perspective值合法也白搭 - 避免
overflow: hidden：它会剪裁Z轴正向延伸的内容，导致部分面消失；如需裁剪，改用clip-path或包裹一层无3D的容器 - 移动端推荐起始值：
perspective: 600px，比桌面端的1000px更适配小屏景深感
Firefox 翻页动画方向反了，怎么调？
Firefox 对 perspective 投影计算与 Chrome 存在细微差异，尤其在 rotateY(-180deg) 这类临界旋转中，根源是默认 perspective-origin 不一致。
- 显式声明
perspective-origin: center center（或50% 50%），堵住引擎间 origin 隐式值差异的漏洞 - 避免在关键帧中混用
rotateY(180deg)和rotateY(-180deg)：它们数学等价，但动画插值路径不同，Firefox 更倾向选“绕远路”；统一用正值或负值 - 加
backface-visibility: hidden到翻转元素上：防止 Firefox 渲染背面时因Z序判断偏差导致视觉错乱 - 若仍异常，可临时给父容器加
transform: translateZ(0)强制触发硬件加速层，有时能对齐渲染行为
最常被忽略的一点：perspective 值不是越大越好，也不是越小越炫。它本质是“视点到投影面的距离”，设成 0 或 none 会直接退化为 flat，而设成 10px 会让 translateZ(20px) 的元素飞出视口——调参得看真实设备预览，别只信 DevTools 里的模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
