CSS transform 是单值属性，后声明覆盖先声明；多动画需合并至同一@keyframes；transform-origin须统一；JS动态修改应清空旧值并用requestAnimationFrame确保帧同步。
transform 多个声明会被后写的覆盖
CSS 的 transform 是单值属性，不是叠加式属性。即使你写了两行 transform: translateX(10px); 和 transform: rotate(45deg);，浏览器只认最后一条，前面的直接丢弃。这不是“冲突”，是 CSS 层叠规则的正常表现——同名属性后声明者胜出。
- 常见错误：在 JS 中分两次设置
element.style.transform = 'translateX(20px)';，再设element.style.transform = 'rotate(90deg)';→ 位移彻底消失 - 正确做法：始终拼成完整字符串，如
element.style.transform = 'translateX(20px) rotate(90deg) scale(1.1)'; - 用
getComputedStyle(element).transform查当前值时，返回的是矩阵（matrix3d），不是原始函数链，无法反推哪部分被覆盖
多个动画同时作用于 transform 会互相干扰
当给一个元素同时加两个 animation，且都修改 transform，比如一个缩放、一个旋转，浏览器不会把它们“合并计算”，而是按动画声明顺序取最后一个动画里的 transform 值作为最终结果。
- 错误写法：
@keyframes zoom { to { transform: scale(1.3); } }+@keyframes spin { to { transform: rotate(360deg); } }+animation: zoom 1s, spin 1s;→ 只生效spin - 必须合并到一个
@keyframes里：@keyframes zoomAndSpin { to { transform: scale(1.3) rotate(360deg); } } - 如果节奏不同（比如缩放快、旋转慢），靠多档关键帧控制：
0% { transform: scale(1) rotate(0); }，40% { transform: scale(1.3) rotate(0); }，100% { transform: scale(1.3) rotate(720deg); }
transform-origin 不统一导致视觉错位
缩放和旋转共用时，锚点位置（transform-origin）不一致会放大错位感。比如 scale() 默认以中心缩放，rotate() 却被设为 top left，结果旋转轴心偏移，看起来像“抖动”或“漂移”。
- 必须显式统一声明：
.element { transform-origin: center center; }或写进关键帧每一帧 - 避免在父容器设
transform-origin后，子元素又单独设——子元素的transform-origin只影响自身变换，不影响父级 -
transform-origin本身不触发重排，但若用百分比或关键词（如50% 50%）配合动态尺寸，实际像素值可能因布局时机不同而微变
JS 动态修改 transform 时没清空旧值
用 JS 给 style.transform 赋值时，如果之前是通过 class 控制动画，或由其他脚本写过值，新值会直接覆盖，但旧动画状态不会自动中断或重置，容易造成跳变或卡顿。
- 安全做法：动画开始前先清空，再设新值：
element.style.transform = '';→setTimeout(() => { element.style.transform = '...'; }, 0); - 更稳妥的是用
requestAnimationFrame确保在下一帧应用：requestAnimationFrame(() => { element.style.transform = '...'; }); - 别依赖
transition自动衔接 JS 设置的transform—— 如果之前没设过初始值，浏览器没有过渡起点，动画会从 0 开始突变
transform 修改来源混在一起，且没人负责协调它们的输出。浏览器不帮你做矩阵乘法，也不保存历史值——它只忠实地执行最后一句。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
