纯CSS实现图片悬停360°平滑旋转需设置transition、transform-origin:center及cubic-bezier缓动，避免跳转、抖动与热区错位。
用 CSS transform: rotate(360deg) 配合 :hover 最直接
不用 JS，纯 CSS 就能实现——核心是给 <img> 添加过渡动画，并在悬停时触发旋转。关键不是“转多少”，而是“怎么转得顺、不跳、可复用”。
常见错误是只写 rotate(360deg) 却没设 transition，结果图片瞬间跳转，没有动画感；或者忘了加 transform-origin，导致绕着左上角转，视觉奇怪。
- 必须设置
transition: transform 0.5s ease（时间可调，但别设0s） - 推荐加上
transform-origin: center，确保绕图片中心旋转 - 旋转起点默认是
rotate(0deg)，所以 hover 时写rotate(360deg)即可，不用写from/to - 如果图片是内联元素（默认），建议加
display: block或vertical-align: middle避免底部留白
img {
display: block;
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
transform-origin: center;
}
img:hover {
transform: rotate(360deg);
}
为什么用 cubic-bezier 而不是 ease
ease 是浏览器默认缓动，开头慢、中间快、结尾又慢，转到 270° 附近容易显得“卡一下”。而自定义 cubic-bezier(0.34, 1.56, 0.64, 1) 这类“缓入缓出加强版”，能让整圈旋转更饱满、有惯性感——尤其对小图标或头像这类高频悬停元素更友好。
- 直接复制上面的贝塞尔值就能用，不用理解曲线坐标
- 如果想更轻快，可试
cubic-bezier(0.22, 0.61, 0.36, 1) - 千万别用
linear：机械感太重，像电机空转
遇到图片闪动/抖动？检查这几个地方
特别是 Chrome 和 Edge，部分显卡加速策略会让 transform 引发重绘异常，表现为旋转时边缘锯齿、轻微位移或闪烁。
立即学习“前端免费学习笔记（深入）”；
- 在 img 样式里加
will-change: transform（仅 hover 前启用，避免常驻开销） - 若仍抖动，强制开启硬件加速：
transform: rotate(360deg) translateZ(0) - 确保图片没被父容器设置
overflow: hidden且圆角过大（border-radius > 50%可能裁切旋转轨迹） - 不要在 img 上同时用
filter: drop-shadow()—— 和transform共存时容易触发渲染 bug
需要支持老版本 Safari？加一行 -webkit-transform
Safari 12 及更早必须带前缀，虽然现在多数项目已不需兼容，但如果你维护的是企业后台或教育系统，仍可能遇到。
- 只需在
transform前加一行：-webkit-transform: rotate(360deg) - 对应 transition 也要加：
-webkit-transition: -webkit-transform 0.6s - 现代 Safari（13+）和所有新版 Chrome/Firefox/Edge 已完全支持无前缀写法
真正麻烦的不是写法，而是旋转后图片的交互热区没变——transform 不影响文档流，点击区域还是原位置。如果要做按钮式交互，得用 pointer-events: none + 包一层 <div> 来接管事件，这个细节很容易被忽略。
