使用CSS的animation与transform可实现图片旋转动画。1. 通过@keyframes定义从0deg到360deg的spin动画，结合animation: spin 2s linear infinite使图片每2秒匀速转一圈并无限循环；2. 利用:hover配合transition实现鼠标悬停时旋转180deg的交互效果；3. 自定义关键帧如wobble-rotate创建摇摆式旋转，增强视觉提示；4. 注意设置display、transform-origin调整旋转中心，使用will-change提升性能，并在移动端避免过度动画。掌握这些技巧即可灵活控制旋转效果。
想让图片动起来？CSS 的 animation、transform 和 rotate 是实现旋转动画的核心工具。只需要几行代码，就能让图片平滑地持续转动，适用于加载图标、悬停效果或视觉装饰。
1. 基础旋转动画：无限循环转圈
使用 @keyframes 定义旋转过程，再通过 animation 应用到图片上。
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-img {
animation: spin 2s linear infinite;
}
将这个类应用到 img 标签：
<img src="example.jpg" class="rotate-img" alt="旋转图片">
这段代码会让图片每 2 秒完成一次完整旋转，并持续不断重复。
立即学习“前端免费学习笔记（深入）”；
2. 鼠标悬停触发旋转
不想一直转？可以用 :hover 实现交互式旋转。
.rotate-on-hover {
transition: transform 0.6s ease;
}
.rotate-on-hover:hover {
transform: rotate(180deg);
}
鼠标移上去时，图片会缓慢转半圈，移开后恢复原位。调整 rotate() 的角度和 transition 时间可控制效果。
3. 自定义旋转路径与节奏
除了匀速转圈，还能定义更复杂的旋转行为。
@keyframes wobble-rotate {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(10deg);
}
75% {
transform: rotate(-10deg);
}
100% {
transform: rotate(0deg);
}
}
.wobble {
animation: wobble-rotate 1.5s ease-in-out infinite;
}
这种“摇摆式”旋转适合提示性图标，比全圈旋转更柔和。
4. 优化与注意事项
为了让动画更流畅、兼容性更好，注意以下几点：
- 给动画元素添加 display: block 或设置宽高，避免布局抖动
- 使用 transform-origin 调整旋转中心点，例如 transform-origin: center top; 让图片绕顶部旋转
- 在需要硬件加速的场景，可添加 will-change: transform 提升性能
- 移动端注意节制使用，避免过度动画影响体验
基本上就这些。掌握 keyframes 和 transform 的组合，你可以自由控制旋转速度、方向和触发方式。不复杂但容易忽略细节，比如单位别写错（deg、rad），时间用 s 或 ms 别混用。试试看吧！
