hover时用transform实现旋转放大需先rotate后scale，配合transform-origin和transition才能保证视觉稳定、动画流畅且兼容性好。
hover 时用 transform 实现旋转放大，必须写对顺序
transform 的执行顺序是关键：rotate 和 scale 的书写顺序直接影响最终视觉效果。浏览器按从左到右顺序应用变换，rotate(30deg) scale(1.2) 是先绕原点转再等比放大；而 scale(1.2) rotate(30deg) 是先放大、再绕放大后的中心旋转——后者容易导致元素“飘移”或旋转轴偏移。
常见错误现象：transform: scale(1.2) rotate(30deg) 导致悬停后元素突然向右下偏移，松开鼠标又弹回原位。
- 统一用
rotate在前、scale在后，视觉更稳定 - 如果需要绕某点旋转（比如右下角），得配合
transform-origin，不能只靠调换顺序 - 所有值建议写单位（
deg、px），避免部分旧版 Safari 解析异常
CSS hover 动画必须加 transition 才有缓动效果
只写 :hover { transform: rotate(15deg) scale(1.1); } 会让旋转放大瞬间完成，肉眼可见生硬。没有 transition，就等于没动画。
使用场景：按钮、卡片、图标等交互元素，用户期待的是“响应+反馈”，不是跳变。
- 至少指定属性和持续时间：
transition: transform 0.3s ease; - 避免写
transition: all 0.3s;—— 容易意外触发其他属性动画（比如color或opacity变化） - 在非 hover 状态也写上
transition，防止鼠标快速进出时动画队列错乱
transform-origin 不设默认值，旋转中心可能出人意料
默认 transform-origin: 50% 50%，也就是元素中心。但如果你的元素设置了 padding、border，或父容器用了 flex / grid 对齐，实际视觉中心可能和计算中心不一致，导致旋转像“抖动”。
常见错误现象：悬停后图标看似绕自己转，实则绕左上角小幅度晃动；文字按钮旋转时基线跳动。
- 显式声明：
transform-origin: center;或transform-origin: 0 0;（左上角） - 图标类元素常用
transform-origin: center;，按钮文字建议用transform-origin: center bottom;避免上浮感 - 注意：
transform-origin不支持transition，它本身不带动画，只影响transform的基准点
IE11 及部分安卓 WebView 对 transform 缩放兼容性差
IE11 支持 transform，但对 scale() 的子像素渲染有问题，尤其配合 rotate() 时容易模糊或锯齿；某些安卓 4.x WebView（如 UC 内核）会忽略 scale 或强制重置为 1。
性能影响：高频悬停（比如网格列表）叠加 transform + transition，低端机可能出现掉帧，尤其是同时触发 box-shadow 或 filter。
- 加
will-change: transform;提前告知浏览器优化，但别滥用（会导致内存占用上升） - 必要时降级：IE11 下只保留
scale或只保留rotate，用@supports (transform: scale(1))包裹完整动画 - 测试真机：模拟器里看不出的闪烁，在千元安卓机上可能非常明显
真正难的不是写出来，而是让旋转中心稳住、动画不跳、老设备不糊——这些细节全藏在 transform-origin、transition 位置、和是否加了 will-change 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
