CSS 3D transform 过渡需保证起止值函数类型、顺序、单位及零值表达完全一致，否则因结构不匹配导致插值失败；正确做法是统一使用如 rotateY() rotateX() translateZ() 的固定顺序并显式写出所有分量。

transition 无法直接过渡 transform 的 3D 分量

CSS transition 不会“理解” transform: rotateX(0deg) translateZ(0px) 到 rotateX(45deg) translateZ(100px) 中的 3D 变化逻辑——它只做数值插值，而 transform 是一个复合属性，浏览器对它的过渡支持依赖于能否将起止值解析为可线性插值的中间状态。若起止 transform 值中包含不同函数顺序、缺失分量或混合 2D/3D 函数，过渡常会跳变或完全失效。

• 必须保证起始和结束的 transform 使用**完全相同的函数类型与顺序**，例如都写成 rotateX() rotateY() translateZ()，不能一个用 translateZ() rotateX()
• 未显式声明的分量（如省略 rotateY(0deg)）不会被自动补零，会导致插值目标不明确
• transform-style: preserve-3d 必须作用于父容器，否则子元素的 3D 变换会被扁平化，失去深度感

正确写法：用完整、有序、单位一致的 transform 值

下面是一个可稳定过渡的 3D 翻转卡片示例，关键在于统一结构与显式补零：

/* 父容器启用 3D 空间 */
.card-container {
  perspective: 1000px;
}
.card {
transition: transform 0.6s ease;
transform-style: preserve-3d;
}
.card.is-flipped {
transform: rotateY(180deg) rotateX(0deg) translateZ(0px);
}
.card:not(.is-flipped) {
transform: rotateY(0deg) rotateX(0deg) translateZ(0px);
}

• 所有 transform 值都按 rotateY → rotateX → translateZ 固定顺序书写
• 即使值为 0deg 或 0px，也显式写出，避免隐式缺省
• 单位严格匹配：deg 对角度，px 对长度；混用 rem 或无单位数字会中断过渡

常见失效场景与修复方式

以下错误写法会导致 3D 过渡卡顿、跳变或静止不动：

• 起始值含 scale(1)，结束值加了 rotateZ(90deg) —— 函数种类变化，浏览器无法插值，应统一为 scale(1) rotateZ(0deg) → scale(1) rotateZ(90deg)
• 使用 transform: translate3d(0,0,0) 和 translateZ(50px) 混合 —— translate3d 是独立函数，与 translateZ 不兼容，应全用 translate3d(0,0,0) → translate3d(0,0,50px)
• 父元素没设 perspective，或设在了动画元素自身上（应设在能包裹整个 3D 场景的最近共同祖先）
• 触发过渡时通过 JS 动态改 style.transform，但未强制重排（如读取 offsetHeight），导致浏览器合并样式变更，跳过过渡

性能敏感点：will-change 与 GPU 加速

纯 CSS transform + opacity 是唯一能触发硬件加速的组合。3D 变换本身已启用 GPU，但若过渡元素频繁重绘（比如内部有文字或渐变），仍可能掉帧。

• 对持续动画的 3D 元素，添加 will-change: transform 可提前提示浏览器准备图层，但**仅在必要时启用**，滥用反而增加内存开销
• 避免在 3D 元素内使用 filter、box-shadow 或大量伪元素，它们会迫使浏览器降级到 CPU 合成
• 用 transform: translateZ(0) 强制提升图层虽有效，但在现代浏览器中不如直接用真实 3D 函数（如 translate3d）可靠

3D 过渡真正难的不是写法，而是保持 transform 值的“结构一致性”——只要起止两行 CSS 在函数名、顺序、单位、零值表达上完全对齐，浏览器就能算出每一帧该画在哪。多数失败都源于人眼觉得“语义相同”，但 CSS 引擎判定“结构不同”。