css 过渡与 transform 组合使用_如何实现旋转与缩放过渡_技术教程

必须显式声明transition: transform .3s ease，且transform需写成rotate(30deg) scale(1.5)复合值；搭配will-change: transform启用GPU加速，并用cubic-bezier(.25,.46,.45,.94)优化缓动。

transition 与 transform 同时生效却没动画？

直接给 transform 加 transition 却看不到旋转或缩放动画，大概率是过渡属性没写对。CSS 过渡必须明确指定要过渡的属性名，不能只写 transition: all .3s 就指望 transform 自动动起来——部分浏览器对 all 的解析不一致，尤其涉及矩阵计算时会跳过动画。

必须显式写成 transition: transform .3s ease
如果同时过渡旋转和缩放，不需要拆成多条声明，transform 本身支持复合值，一条 transition 就够
确保触发变化的是 transform 值本身（比如从 rotate(0deg) scale(1) 到 rotate(45deg) scale(1.2)），而不是靠切换 class 时间接改变其他属性间接影响 transform

rotate() 和 scale() 能否在同一个 transform 里共存？

可以，而且必须共存——transform 是单值属性，多次声明

会覆盖，不是叠加。想同时旋转+缩放，得把它们写在一个 transform 声明里，顺序还会影响结果。

顺序很重要：先缩放再旋转，和先旋转再缩放，视觉效果不同（缩放会影响旋转中心的像素密度）
推荐统一用「先旋转后缩放」：更符合直觉，也避免缩放后旋转半径变大导致位移异常
不要这样写：
```
transform: rotate(30deg);
transform: scale(1.5);
```
——第二行会完全覆盖第一行
应该这样写：
```
transform: rotate(30deg) scale(1.5);
```

transition-duration 太短或 easing 不匹配导致“卡顿”

缩放+旋转组合动画容易显得生硬，不是因为代码错，而是 timing function 和持续时间没适配形变特性。纯 ease 在中段加速太猛，旋转角度变化快、缩放比例变化慢时，人眼会感知为“转得急、长得慢”，像脱节。

改用 cubic-bezier(.25,.46,.45,.94)（类似 ease-out 但收尾更柔和），能缓解旋转突兀感
缩放建议略长于旋转：比如 rotate(720deg) 用 .6s，scale(1.8) 配 .7s——但注意：不能分开设 duration，必须统一用一个 transition 声明，所以取较长值
避免 transition: transform .1s，低于 .2s 的过渡人眼基本识别不出渐变，看起来就是闪现