perspective必须加在独立容器（如.scene）上，而非body或html，否则fixed元素错位；需与transform-style: preserve-3d同级设置，且backface-visibility: hidden须写在执行变换的子元素上，transform声明必须前置。
perspective加在body上导致fixed元素错位
这是Safari下最隐蔽也最常被忽略的层级失效根源。一旦perspective设在body或html上，整个页面就变成一个3D渲染上下文，所有position: fixed元素会退化为相对于该容器定位——它们不再锚定视口，而是随滚动偏移、甚至消失。
真正起效的做法只有这一种：
- 单独包裹需要3D效果的区域，比如<div class="scene"></div>
- 把perspective和transform-style: preserve-3d都写在.scene上
- 确保.scene的父级没有transform、opacity、filter或overflow: hidden——这些都会意外扩大3D上下文范围
transform-style: preserve-3d没生效的真因
写了transform-style: preserve-3d却看不到translateZ效果，90%是因为它没和perspective出现在同一元素上。这个属性本身不启动3D流程，它只是“允许子元素保留Z坐标”，而perspective才是那个真正触发透视投影的开关。
必须满足三个条件才可能生效：
- perspective和transform-style: preserve-3d写在同一个元素上
- 该元素是目标变换元素（如.card）的**直接父级**
- 子元素自己要带transform（哪怕只是rotateY(0)），否则浏览器不会启用3D渲染路径
iOS Safari中perspective值敏感且需前缀
iOS Safari（尤其15.4之前）对perspective值极其敏感：设为0、none或过小（如50px）会直接降级为flat渲染；过大（如5000px）则接近正交投影，失去纵深感。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
实操建议：
- 起始值用perspective: 600px（移动端）或1000px（桌面），真机调试微调
- 必须加-webkit-perspective前缀，仅写标准属性在旧版iOS上无效
- 避免动态修改perspective值，这会强制每帧重计算投影矩阵，引发卡顿或空白
backface-visibility: hidden声明顺序错误
在Safari中，backface-visibility: hidden是否生效，完全取决于它前面有没有transform声明。CSS解析顺序错一位，整个3D翻转就失效——不是动画不动，而是背面内容反复绘制、闪烁、穿模。
正确写法只有一种：.card { transform: translateZ(0); backface-visibility: hidden; }
- transform必须在前，且不能是none或空值
- 不要写在父容器上，必须加在执行动画的元素自身
- 如果用了rotateY类翻转，且需要显示背面内容，那就不能设hidden，得改用visible并确保正反面都有独立backface-visibility
复杂点在于，perspective本身不“修复”任何东西——它只是3D空间的观察参数。真正决定层级是否稳定、是否闪屏、是否错位的，是它和transform-style、backface-visibility、transform三者的位置、顺序与取值组合。漏掉任意一环，Safari就退回2D渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
