浏览器对transform是整体替换而非逐项叠加，必须将多个函数写在同一行用空格拼接；顺序影响运算逻辑，推荐先rotate后scale；animation和transition均需单值声明并显式设置transform-origin。
transform 多个函数必须写在同一行声明里
浏览器对 transform 的处理是“整体替换”，不是“逐项叠加”。哪怕你写了两行 transform: rotate(45deg); 和 transform: scale(1.2);，后一行会直接抹掉前一行，最终只生效最后一个值。
正确做法是把所有变换函数用空格拼成一个值：
transform: rotate(45deg) scale(1.2) translateX(20px);
常见错误包括：
- 在同一个 CSS 规则块里重复写
transform属性 - 误以为
transform: rotate(45deg);和transform: scale(1.2);可以共存 - 在动画中拆分成多个
@keyframes分别控制不同变换
动画中 rotate 和 scale 不同步？检查是否共用一个 @keyframes
用两个独立动画（比如 animation: spin 2s, zoom 2s;）去分别驱动旋转和缩放，几乎必然失败——因为每个动画都在重写整个 transform 值，后执行的会覆盖前执行的。
立即学习“前端免费学习笔记（深入）”；
必须只定义一个动画，所有变化都写进同一组关键帧：
@keyframes spinAndScale {<br> 0% { transform: rotate(0deg) scale(1); }<br> 50% { transform: rotate(180deg) scale(1.3); }<br> 100% { transform: rotate(360deg) scale(1); }<br>}
这样浏览器每帧都计算一个完整变换矩阵，旋转与缩放自然绑定、节奏一致。
函数顺序影响最终位置，rotate 和 scale 谁先谁后？
transform 函数的书写顺序决定运算顺序：先写的先执行，后写的在已变换的基础上再算。例如：
-
transform: rotate(45deg) scale(2);→ 先绕原点转 45°，再以新中心放大 2 倍 -
transform: scale(2) rotate(45deg);→ 先放大，再绕放大后的中心转 45°，视觉偏移更明显
多数场景推荐先 rotate 后 scale，尤其当元素有 transform-origin 偏移时，顺序错会导致旋转轴心“漂移”。
transition 中多个 transform 变化也要合并写
和 animation 类似，transition 也不能靠多次声明来叠加效果。下面写法无效：
transition: transform 0.3s;<br>transition: transform 0.3s ease-in-out;
第二行会覆盖第一行；而如果想让 transform 在 hover 时同时旋转+缩放，必须：
- 初始状态写完整
transform值（如transform: rotate(0) scale(1);） - hover 状态也写完整值（如
transform: rotate(30deg) scale(1.1);） - 只用一条
transition: transform 0.3s;
否则过渡会跳变或只动一半。
最容易被忽略的是：transform-origin 必须显式设置，尤其当元素不是居中缩放或绕非中心点旋转时——否则 scale 和 rotate 的基准点不一致，组合后看起来像在“滑动”而不是“原地转”。
