transform: rotate() 本身是静态的，需配合 @keyframes 和 animation 才能实现自动旋转；rotate() 等价于 rotatez()，均绕 z 轴旋转；动画需设全 animation 属性，推荐 duration 取 60 的因数以保流畅。
transform: rotate() 本身不会自动动，必须配合 @keyframes 和 animation 才能实现自动旋转。只写 rotate(360deg) 是静态的，这点很多人一开始会卡住。
用 @keyframes + animation 实现匀速无限转圈
这是最常用、兼容性最好（Chrome/Firefox/Safari/Edge 均支持）的方式。核心是定义关键帧，再绑定到图片上：
-
@keyframes必须包含from和to，或 0% / 100%，否则动画不触发 -
animation的四个常用值要写全：name duration timing-function iteration-count - 别漏掉
infinite，否则只转一次就停 - 如果图片有宽高塌陷或布局错位，加
display: block或设明确width/height
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rotate-auto {
animation: spin 1.8s linear infinite;
display: block;
}
然后在 <img> 上加 class="rotate-auto" 即可。时间调成 1.8s 是为了避开某些浏览器对 2s 的渲染抖动，实测更稳。
rotateZ() 和 rotate() 有什么区别？
没区别——rotate(360deg) 就是 rotateZ(360deg) 的简写，都绕 Z 轴（垂直于屏幕）旋转。但要注意：
- 如果父容器用了
transform-style: preserve-3d或设置了perspective，单独写rotate()仍走 Z 轴，不会意外变成 3D 效果 - 想做 Y 轴翻转（镜像），得用
rotateY(180deg)，不能只靠rotate() - IE10+ 支持
rotate()，但 IE9 及以下必须用-ms-transform: rotate(360deg)（已基本可忽略）
鼠标悬停暂停、移开继续转？得用 JS 控制 animation-play-state
CSS 自身无法“暂停后继续”，:hover 切换 animation-play-state 只能暂停/恢复，但计时器不会记住上一帧位置，移开后会从头开始转。真需求要靠 JS：
- 监听
mouseenter，设el.style.animationPlayState = 'paused' - 监听
mouseleave，设回'running' - 注意：不能直接操作
style.animation全量重写，否则会重置动画状态 - 若需精确控制角度（比如转到一半暂停），改用
requestAnimationFrame+ 动态更新transform更可靠
为什么图片转着转着变糊了？
常见于 Chrome 和 Safari，本质是 sub-pixel 渲染问题。当旋转角度不是整数（如 rotate(0.5deg)）或动画帧率不稳定时，浏览器会启用抗锯齿，导致边缘发虚。解决方法很实际：
- 把
animation-duration设为能被 60 整除的值（如1.2s、1.5s），减少丢帧 - 加
will-change: transform提前告知浏览器要动，触发 GPU 加速（但别滥用，可能引发内存占用升高） - 避免同时叠加多个 transform 操作（比如
rotate() scale() translate()一起用），拆成独立动画更可控
真正容易被忽略的是：动画元素如果处于 position: absolute 且父容器没设 overflow: hidden，旋转时可能撑出滚动条或遮挡其他内容——这点在响应式布局里经常突然冒出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
