根本原因是浏览器对3D变换插值路径选择逻辑不同：Chrome倾向顺时针短路径，Firefox可能选逆时针路径，导致-180deg旋转视觉差异；应改用-179deg或动画后JS补帧，且perspective须设于包含块而非翻转元素自身。
perspective 在不同浏览器中效果不一致，根本原因不是“没生效”或“写错了”，而是浏览器对 3D 变换插值路径的选择逻辑不同——尤其当旋转角度落在 180deg 或 -180deg 这类对称临界点时，Firefox 和 Chrome 可能走完全不同的旋转方向。
rotate3d(0, 1, 0, -180deg) 是最大陷阱
这个写法在数学上等价于翻转 180°，但动画引擎不关心“结果一样”，只按浮点插值算路径。Chrome 倾向选“向上翻”的顺时针短路径，Firefox 却可能选“向后凹陷”的逆时针路径，导致视觉上像页面被吸进屏幕里。
- 直接改
-180deg→-179deg就能强制两者选同一条路径，这是最轻量、最可靠的绕过方式 - 不要用
rotateY(180deg)替代 —— 它底层仍是rotate3d，问题照旧 - 如果必须精确 180°（比如卡片正反面切换），可在动画结束时用 JS 补一帧：动画完成后再设回
transform: rotateY(180deg)，视觉无感但 DOM 状态准确
perspective 放在哪儿，决定了谁有“透视感”
很多人把 perspective 加在要翻转的元素自身上，结果发现 Firefox 里透视失效、Chrome 却正常——这是因为 perspective 必须作用于**包含块（containing block）**，也就是所有 3D 子元素的共同父容器。
- ✅ 正确：
.flip-container { perspective: 800px; }，子元素设transform-style: preserve-3d - ❌ 错误：
.card { perspective: 800px; transform: rotateY(…); }—— 此时透视原点绑定在 card 自身，翻转时原点随它动，失去稳定参照 - 注意：Safari 对
perspective值敏感，500px以下可能缩得太小，建议从1000px起调
transform-style: preserve-3d 不是可选项
没有它，子元素的 Z 轴位移会被拍平到 XY 平面，所有 3D 效果退化为 2D 位移或缩放。但更隐蔽的问题是：Firefox 对 preserve-3d 的启用条件比 Chrome 更严格。
立即学习“前端免费学习笔记（深入）”；
- 父容器若含
overflow: hidden，Firefox 会静默丢弃preserve-3d（Chrome 仍保留） - 父容器若同时设了
filter（哪怕只是filter: opacity(1)），Firefox 会强制关闭 3D 上下文 - 验证方法：在开发者工具中检查该元素的 computed styles，确认
transform-style确实是preserve-3d，而非被重置为flat
真正容易被忽略的，是 perspectiveOrigin 的默认值。它默认是 50% 50%（中心），但一旦父容器尺寸动态变化（比如响应式宽度），Firefox 会比 Chrome 更早触发重绘偏移，导致翻页轴心漂移。如果动画关键帧里没显式声明 perspective-origin，就等于把一致性交给了浏览器的内部重排策略。
