perspective必须设在父容器上，因为它定义观察者距z=0平面的距离，是空间观察条件；设在子元素上无效，且需配合transform-style: preserve-3d，否则子元素被拍平。
perspective 为什么必须设在父容器上
因为 perspective 不是作用于“要转的元素”，而是定义“观察者离 z=0 平面有多远”——它描述的是一个空间观察条件，只能由包含子元素的容器来声明。直接写在子元素上（比如 .box { perspective: 1000px; transform: rotateY(45deg); }）完全无效，浏览器会忽略该 perspective 值。
常见错误现象：
- 加了
perspective却看不到任何透视缩放或深度感 - 子元素
rotateX/rotateY看起来像在平面上翻转，没有“绕轴旋转进屏幕”的立体感
正确做法：
- 给子元素包一层父容器（如
.scene），把perspective和transform-style: preserve-3d都加在它上面 - 子元素只负责
transform（如rotateY(45deg)、translateZ(200px)）
transform-style: preserve-3d 缺失导致的“拍平”现象
即使 perspective 写对了位置，如果父容器没设 transform-style: preserve-3d，所有子元素仍会被强制渲染在同一个 2D 平面内——这就是所谓“被拍平”。此时 translateZ、rotateX 等 Z 轴操作看似执行了，但视觉上毫无纵深变化。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的触发条件：
-
overflow: hidden、opacity: 0.99、filter: blur(1px)等属性会意外创建新的层叠上下文，间接使preserve-3d失效 - 父容器自身有
transform（哪怕只是translateZ(0)）但没配preserve-3d，子元素依然被扁平化 - iOS Safari 中，有时还需额外加
transform: rotateZ(0deg)来稳定 3D 渲染层（避免旋转时子元素穿模或闪烁）
fixed 定位失效与 perspective 的隐式影响
把 perspective 直接加到 body 或根级容器上，极大概率导致页面中所有 position: fixed 元素行为异常：它们不再相对于视口定位，而是变成类似 absolute，随滚动偏移。这不是 bug，而是规范行为——一旦祖先元素建立了 3D 渲染上下文（由 perspective + transform 触发），它就成为一个新的 containing block，fixed 将退化为相对于该块定位。
解决方案很明确：
- 绝不要把
perspective加在body、html或全局布局容器上 - 为需要 3D 效果的区域单独包裹一层
<div class="scene">，仅在此节点设置perspective和transform-style: preserve-3d - 检查该
.scene的父级是否意外带了transform或opacity——这些都可能扩大 3D 上下文范围
mix-blend-mode、filter 等属性与 3D 的互斥性
只要父容器或任意更上层祖先启用了 mix-blend-mode、filter、will-change: transform 等会创建独立渲染表面（render surface）的属性，preserve-3d 就会失效。浏览器底层会为这些属性创建 FBO（帧缓冲对象），而 FBO 不支持保留子元素的 3D 空间信息，结果就是整个子树被强行压平成 2D。
排查要点：
- 打开 DevTools → Elements → 检查目标父容器及其所有祖先，搜索是否有
mix-blend-mode、filter、opacity < 1、will-change - 临时注释掉疑似样式，看 3D 效果是否恢复
- 若必须用
filter，可尝试将它移到最内层变换元素上（而非父容器），有时能规避 render surface 创建
真正难调试的，往往不是 perspective 没写对，而是某处透明度、混合模式或动画提示悄悄关掉了 3D 渲染通道——这种失效不报错，只静默降级。
