必须同时设置transform初始值（如rotate(0deg)）和:hover目标值（如rotate(360deg)），并将transition写在基础选择器上（如img），才能实现平滑悬停旋转动画；否则首次悬停会跳变或仅移出时生效。
用 transform 和 transition 实现图片悬停渐变旋转
直接给结论：必须同时设置 transform 的初始值（比如 rotate(0deg)）和悬停目标值（比如 rotate(360deg)），再配合 transition 才能触发平滑渐变动画。只写 :hover { transform: rotate(360deg); } 是没用的——浏览器不知道从哪开始过渡。
transition 必须写在非 hover 元素上
常见错误是把 transition 只加在 :hover 里，这样动画只会在鼠标移出时生效（因为移入时没有过渡定义）。正确写法是：
img {
transform: rotate(0deg);
transition: transform 0.5s ease-in-out;
}
img:hover {
transform: rotate(360deg);
}-
transition要写在基础选择器（如img）上，不是img:hover -
transform初始值不能省略，否则第一次悬停会“跳变” -
ease-in-out比linear更自然，但可按需替换
旋转中心点默认是图片中心，想改用 transform-origin
如果希望绕左上角转、或绕底部中点转，就得调整锚点。默认值是 center center，等价于 50% 50%：
img {
transform: rotate(0deg);
transform-origin: top left; /* 绕左上角旋转 */
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}-
transform-origin值支持关键字（top/bottom/left/right）、百分比、像素 - 搭配自定义
cubic-bezier()能做出更富弹性的旋转节奏，避免机械感 - 注意：若图片有
display: block或设置了宽高，transform-origin行为更可控；内联图片可能受行高影响
兼容性与性能注意点
现代浏览器都支持 transform + transition，但有两个实际坑：
立即学习“前端免费学习笔记（深入）”；
- 旧版 Safari（transform: rotateZ() 支持不稳定，统一用
rotate()更稳妥 - 频繁重排（如父容器尺寸不定）可能让旋转抖动，建议给图片加
will-change: transform提前提示渲染引擎（仅在必要时加，别滥用） - 如果图片带
object-fit: cover，旋转后边缘可能被裁切，需检查容器overflow设置
旋转动画本身很简单，真正卡住人的往往是初始状态没声明、transition 位置放错、或者没意识到 transform-origin 默认行为在不同布局下表现不一致。
