perspective 会创建新的 containing block，使 position: fixed 元素退化为 relative 定位；safari 中 body 设置 perspective 最危险；安全做法是用独立 .scene 容器包裹 3d 区域并同级设置 perspective 和 transform-style。
perspective 会创建新的 containing block
只要父级元素设置了 perspective（哪怕值是 perspective: 600px），它就立刻成为子元素的包含块（containing block）。而 position: fixed 的定位基准，正是其最近的非-static 包含块——一旦这个包含块不再是视口，而是某个带 perspective 的容器，fixed 就等效于 absolute，随滚动偏移、位置飘移甚至消失。
Safari 下 perspective 写在 body 上最危险
这是移动端和 Safari 最常踩的坑：把 perspective 直接加在 或 上，等于让整个页面进入一个全局 3D 渲染上下文。所有 fixed 元素（导航栏、返回顶部按钮、弹窗遮罩）都会退化为相对于 body 定位。结果就是——滚动时它们跟着动，缩放后坐标错乱，键盘弹出时直接“掉下来”。
真正安全的做法只有：
- 单独用一个 <div class="scene"> 包裹需要 3D 效果的区域<br>
- 把 <code>perspective 和 transform-style: preserve-3d 都写在 .scene 上
- 确保 .scene 的父级没有 transform、filter、opacity 或 overflow: hidden
perspective 和 transform-style 必须同级且同容器
transform-style: preserve-3d 本身不触发 3D 渲染，它只是“允许子元素保留 Z 轴”。真正启动透视投影的是 perspective，而且它必须和 transform-style 出现在**同一个元素上**，且该元素必须是执行 transform（如 translateZ、rotateY）的元素的**直接父级**。
常见错误：
- 把 perspective 写在 ，transform-style 写在 .card 的父容器上 → 失效
- 子元素没写任何 transform（比如只靠 z-index 想堆叠）→ 浏览器根本不会启用 3D 渲染路径
- perspective 值过小（50px）或为 0 / none → iOS Safari 15.4 之前直接降级为 flat 渲染
backface-visibility 生效依赖 transform 声明顺序
在 Safari 中，backface-visibility: hidden 是否起作用，完全取决于它前面有没有有效的 transform 声明。如果顺序反了、或者 transform 是 none、空值、或被继承覆盖，背面内容就会反复绘制、闪烁、穿模。
正确写法只有一种：.card { transform: translateZ(0); backface-visibility: hidden; }
- transform 必须在前，且不能是 none
- 这条规则必须写在执行动画的元素自身上，不能写在父容器
- 如果你确实需要显示翻转后的背面（比如卡片正反面都有内容），那就不能设 hidden，得明确设 visible 并确保正反两面都带独立声明
真正难处理的不是写错一行 CSS，而是多个框架共用 DOM 树时，某层第三方组件悄悄加了 perspective 或 transform: translateZ(0)，而你根本没在源码里看到——这时候靠 DevTools 的 Computed 面板逐层查 transform 和 perspective 计算值，比猜快得多。
