需先在父容器设置 perspective 才能使 perspective-origin 生效，且该属性须写在启用 3d 的父元素上；子元素触发层叠上下文、动画中动态修改 origin 或浏览器解析差异均会导致异常。
perspective-origin 设置后动画没变化？检查是否漏了父容器的 perspective
很多人调 perspective-origin 发现旋转、缩放毫无反应，根本原因是：这个属性本身不触发 3D 渲染，它只影响已启用 3D 上下文的父容器的观察点。没配 perspective，perspective-origin 就是摆设。
实操建议：
- 确保某个祖先元素（通常是直接父级）设置了
perspective: 400px这类值，且不能是0或none -
perspective-origin要写在同一个元素上（即设置了perspective的那个），不是写在要动的子元素上 - 值用百分比或绝对长度都行，但注意默认是
50% 50%（正中心），改成0% 0%才会让“镜头”移到左上角，产生明显偏移感 - 如果父容器宽高为
auto或由内容撑开，perspective-origin的百分比可能难以预测——建议给父容器设明确宽高
用 transform-style: preserve-3d 却还是扁平化？确认子元素没触发层叠上下文
加了 preserve-3d 后子元素依然像贴在一张纸上转，大概率是某个子元素自己触发了新的层叠上下文（stacking context），导致浏览器强制把它拍平回 2D 空间。
常见诱因：
立即学习“前端免费学习笔记（深入）”；
- 子元素用了
opacity小于 1（比如opacity: 0.99） - 用了
filter（哪怕只是filter: none） - 设置了
will-change: transform但没配好触发条件 -
transform值里混用了 2D 和 3D 函数（如translateX(10px) rotateY(45deg)没问题，但translateX(10px) scale(1.2)是纯 2D，会断掉 3D 链）
perspective-origin 动画卡顿或跳变？避免在动画中动态改 origin
perspective-origin 本身不支持硬件加速，浏览器每次更新都要重算整个 3D 投影矩阵，直接对它做 transition 或 @keyframes 很容易掉帧，尤其在中低端设备上表现为生硬跳变。
更稳的做法：
- 用
transform: translateZ()+ 定位父容器来模拟视角移动（本质是挪“物体”，不是挪“眼睛”） - 如果真要动 origin，只在关键帧起点/终点设值，中间用 JS 控制节奏，别依赖 CSS 自带动画
- 测试时打开 Chrome DevTools 的
Rendering > FPS Meter，看到帧率骤降就说明 origin 在拖累性能
不同浏览器对 perspective-origin 解析不一致？优先用数值单位避开百分比歧义
Safari 对 perspective-origin: left top 的解析和 Chrome 不同；Firefox 在 flex 容器里对百分比 origin 的基准点有时会取 content-box 而非 border-box。最保险的是不用关键字或纯百分比。
推荐写法：
- 用像素值：
perspective-origin: 20px 30px（以父容器左上角为原点） - 用
calc()混合：perspective-origin: calc(50% - 20px) calc(50% + 10px)，比纯百分比可控 - 避免
left center这类组合，它们在部分 Safari 版本里会被忽略
真正麻烦的不是怎么写对 perspective-origin，而是它依赖的整个 3D 渲染链路太脆弱——一个 overflow: hidden、一次意外的 z-index 提升、甚至父元素少了个 backface-visibility: hidden，都可能让视角偏移失效。动手前先用 DevTools 的 3D 视图（Chrome 的 Rendering > Show 3D view）看看当前场景是否真建起了立体空间。
