浏览器只执行最后一个transform声明，因transform是单值属性而非列表；正确做法是合并为一条函数链如translateX(100px) rotate(45deg)，并显式设置transform-origin。
transform动画叠加时浏览器只执行最后一个
多个 transform 声明（比如同时写 translateX() 和 rotate()）在 CSS 中不会“叠加执行”，而是被后声明的覆盖——这是最常被误解的起点。浏览器解析样式时，同一属性只保留最终计算值，transform 是单值属性，不是列表。
常见错误现象：
– 写了两行 transform: translateX(100px); 和 transform: rotate(45deg);，结果只有旋转生效
– 动画中用 @keyframes 分段设置不同 transform，但中间帧丢失位移或缩放
正确做法是把所有变换合并成一条函数链：
- 顺序很重要：
transform: translateX(100px) rotate(45deg) scale(1.2); - 不要拆成多条
transform声明 - 如果用 JS 动态设置，也必须拼成完整字符串，不能多次赋值
element.style.transform
rotate + scale 同时动画时出现视觉抖动
这不是 bug，是矩阵计算精度和渲染管线对复合变换的处理方式导致的。尤其在低帧率或高缩放比下，rotate() 和 scale() 共享同一个变换原点，若未显式指定 transform-origin，默认以元素中心为基准，缩放会放大旋转误差。
立即学习“前端免费学习笔记（深入）”；
使用场景：图标悬停旋转+放大、卡片翻转前微缩放预判
实操建议：
- 始终显式设置
transform-origin，例如transform-origin: center center;或根据需要设为top left - 避免在动画中动态修改
transform-origin，它会触发 layout，打断 GPU 加速 - 如需更稳定表现，用
will-change: transform;提前提醒浏览器（但别滥用，仅限真正动画的元素）
JS 动态修改 transform 导致动画中断或跳变
直接操作 element.style.transform 会覆盖 CSS 动画正在运行的内联值，造成“瞬移”或“重置”。尤其在用 requestAnimationFrame 手动驱动时，若没读取当前 computed 值再叠加，就等于丢弃了动画引擎的中间状态。
常见错误现象：
– CSS 动画正进行 translateY，JS 突然写入 element.style.transform = 'rotate(10deg)'，元素立刻回到顶部并旋转
– 使用 getComputedStyle(el).transform 得到的是矩阵，但手动解析再拼接容易出错
实操建议：
- 优先用 CSS 自身完成复合动画，JS 只控制 class 切换（如
el.classList.add('is-rotating')） - 必须 JS 驱动时，用
el.animate()API 替代内联 style 修改，它能与 CSS 动画共存 - 若真要拼接，先用
window.getComputedStyle(el).transform获取当前矩阵，再用new DOMMatrix(...)解析和合成，而不是靠字符串匹配
3D transform（perspective / rotateX）在 Safari 上失效或闪烁
Safari 对 transform-style: preserve-3d 和嵌套 3D 变换的兼容性较弱，尤其在 flex/grid 容器内或父级有 overflow: hidden 时，会强制降级为 2D 渲染，导致 rotateX() 看起来像被压扁或消失。
性能影响：开启 3D 变换本意是启用 GPU 加速，但在 Safari 上反而可能因频繁层合成引发掉帧
实操建议：
- 给 3D 父容器加
backface-visibility: hidden;和transform: translateZ(0);（后者是 Safari 的常见 hack） - 避免在
position: fixed或transform元素上再套 3D 变换 - 测试时打开 Safari 开发者工具 → Elements → 3D View，看图层是否分层正确
多重 transform 的本质是单次矩阵乘法，不是多个动作排队执行。最容易被忽略的是：你以为在“叠加动画”，其实只是在反复重写同一个属性值——从这个角度理解，问题就清晰多了。
