需加 transition 才有悬停旋转动画，推荐 transition: transform 0.3s ease；SVG 旋转中心偏移时应设 transform-origin 为具体像素值（如 12px 12px）；持续旋转用 @keyframes + animation，悬停暂停需配合 animation-play-state: paused。
用 transform: rotate() 实现图标悬停旋转
直接加 transform: rotate(360deg) 不会动，缺过渡就只是瞬间跳变。必须配 transition 才有缓动效果。
-
transition要写在默认状态（非:hover）里，否则第一次悬停没动画 - 推荐只过渡
transform，别用all，避免意外触发其他属性变化导致卡顿 - 旋转角度建议用
360deg或-360deg，避免浏览器对rotate(0)→rotate(360)的优化误判
示例：
.icon {
transition: transform 0.3s ease;
}
.icon:hover {
transform: rotate(360deg);
}
SVG 图标旋转时中心点偏移怎么办
SVG 默认旋转中心是左上角，转起来像在绕角落打转。得手动设 transform-origin。
- 设成
center最省事，但仅在 SVG 本身宽高明确、且父容器居中时可靠 - 更稳妥的是用像素值，比如
transform-origin: 12px 12px（假设图标 viewBox 是0 0 24 24） - 如果 SVG 是通过
<img alt="CSS如何给图标加上悬停旋转的过渡" >引入的外部文件，transform-origin仍有效，但无法用 CSS 控制内部坐标系
常见错误：transform-origin: 50% 50% 在 inline SVG 里可能不准，因为百分比基于元素盒模型，不是 viewBox 坐标系。
立即学习“前端免费学习笔记（深入）”；
用 @keyframes 做持续旋转和悬停暂停的区别
持续转（比如加载图标）和鼠标悬停才转，是两种需求，不能混用同一套写法。
- 悬停旋转：纯 CSS
:hover + transform + transition，轻量、可中断、响应快 - 持续旋转：用
@keyframes配animation: spin 1s linear infinite，但悬停时想暂停得额外加animation-play-state: paused - 注意
animation和transition同时存在时，transform属性会被后者覆盖，优先级取决于是否在相同伪类下声明
容易踩的坑：给持续旋转的图标再加 :hover { transform: rotate(...) }，结果悬停时动画卡住或跳帧——因为两个 transform 没法叠加，浏览器只取最后一个。
兼容性与性能提醒
老版本 Safari 对 transform 过渡的支持有问题，特别是配合 inline-block 或未设宽高的图标元素。
- 确保图标容器有明确尺寸（哪怕
width: 24px; height: 24px），不然某些安卓 WebView 会丢过渡 - 避免在
position: absolute的图标上只靠top/left定位还加旋转，可能触发重排 - 如果图标是字体图标（如 Font Awesome），
transform没问题，但部分旧版 IE 需要-ms-transform前缀（现在基本可忽略）
真正麻烦的是嵌套在 flex 或 grid 容器里的图标，transform-origin 的基准可能被父级对齐方式干扰，这时候得先确认父容器的 align-items 和 justify-content 行为。
