必须将 rotate 和 scale 合并在一条 transform 声明中，如 transform: rotate(15deg) scale(1.1)，否则后声明会覆盖前者；推荐用 transition 实现 hover 动画，并设置 transform-origin 和 backface-visibility: hidden 防模糊。
hover 时同时 rotate 和 scale 必须用 transform 合并写，不能分开声明
CSS 中 transform 是一个复合属性，同一元素上多次声明（比如先写 transform: rotate(10deg)，再写 transform: scale(1.2)）会导致后者完全覆盖前者——悬停后只会缩放，不会旋转。必须把两个变换合并到一条 transform 声明里。
- ✅ 正确写法：
transform: rotate(15deg) scale(1.1); - ❌ 错误写法：
transform: rotate(15deg);和transform: scale(1.1);分开写在不同规则中 - 注意顺序：
rotate()和scale()的书写顺序会影响视觉效果（尤其当元素有偏移或设置了transform-origin），一般推荐先rotate后scale，更符合直觉
用 transition 实现 hover 平滑动画比 keyframes 更简单直接
如果只是基础的悬停进入/离开动效（比如从 0°→15°、1.0→1.1），transition 足够且更轻量；@keyframes 更适合多阶段、循环、或需要精确控制中间帧的复杂动画（比如先放大再旋转再抖动）。多数场景下，你不需要 keyframes。
- 给元素加
transition: transform 0.3s ease;，再在:hover里写合并后的transform即可 - 避免只对
rotate或只对scale做 transition——必须对transform整体过渡 - 别忘了设
transform-origin（比如center或top left），否则旋转中心可能偏移，导致“飘走”感
transition 和 @keyframes 混用容易出问题：优先级和重绘逻辑冲突
如果既写了 transition 又在 :hover 里调用 @keyframes（比如用 animation: spin-zoom 0.4s forwards;），浏览器会按 CSS 动画优先级规则处理：animation 会接管 transform 控制权，transition 可能被跳过或中断，行为不可预测。
- 要选一种方案：纯
transition（推荐入门/常用场景），或纯animation + @keyframes（需精细控制） - 若坚持用 keyframes，确保 hover 规则里只写
animation，不要同时写transform或transition - keyframes 示例中，
from和to的transform值必须完整匹配，包括未变化的项（如没位移就写translate(0, 0)），否则可能触发意外重排
/* 推荐的 transition 方式 */
.button {
transform: rotate(0deg) scale(1);
transform-origin: center;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.button:hover {
transform: rotate(12deg) scale(1.08);
}rotate 配合 scale 容易让文字模糊，需加 will-change 或 backface-visibility
某些浏览器（尤其是 Chrome）在硬件加速不充分时，对带 rotate 和 scale 的元素渲染字体可能出现轻微模糊，尤其在非整数缩放值（如 scale(1.07)）下更明显。
立即学习“前端免费学习笔记（深入）”；
- 加
will-change: transform;提前提示浏览器该元素将变化（但别滥用，可能引发内存开销） - 或加
backface-visibility: hidden;强制开启 GPU 加速层，对防模糊更稳定 - 避免用
scale(1.0)这种“看似没变”的值——它仍会触发合成层，而scale(1)才是真正的无缩放
实际项目里，90% 的悬停旋转+放大需求用 transition + 合并 transform 就够了。keyframes 看似灵活，但调试成本高，且 hover 动画一旦涉及鼠标快速进出，容易卡顿或状态错乱。真正要注意的是 transform-origin 的取值和是否加了 backface-visibility: hidden——这两点漏掉，动画看起来就是“不对劲”。
