使用CSS transform: rotate() 和 @keyframes 可实现图片旋转动画：1. 用 transform: rotate(45deg) 设置静态旋转；2. 通过 @keyframes 定义从0deg到360deg的spin动画；3. 用 animation: spin 2s linear infinite 让图片持续匀速旋转；4. 可设置 transform-origin 调整旋转中心，或结合 :hover 实现悬停旋转。
想让图片在网页中旋转起来，CSS 提供了简单又强大的方式：结合 transform: rotate() 和 @keyframes。这种方式无需 JavaScript，仅用几行样式就能实现平滑的动画效果。
1. 使用 transform rotate 实现基础旋转
transform: rotate() 可以让元素绕其中心点旋转指定角度。比如让一张图片旋转 45 度：
img {
transform: rotate(45deg);
}
这里的 deg 是角度单位，90deg 是直角，360deg 表示完整一圈。但这样只是静态旋转，要动起来就得靠 @keyframes。
2. 用 @keyframes 定义旋转动画
@keyframes 用来定义动画的关键帧。你可以设定从开始到结束过程中元素的状态变化。比如创建一个持续旋转的动画：
立即学习“前端免费学习笔记（深入）”；
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
这个动画名为 spin，从 0 度转到 360 度。你也可以写成百分比形式，控制更精细：
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
3. 将动画应用到图片上
定义好动画后，通过 animation 属性将其绑定到图片元素：
img {
animation: spin 2s linear infinite;
}
- spin：动画名称，对应 @keyframes 定义的名称
- 2s：动画持续 2 秒
- linear：速度曲线为匀速（也可用 ease、ease-in-out 等）
- infinite：无限循环播放
加上这行代码，图片就会持续匀速旋转了。
4. 常见优化与技巧
为了让旋转更顺滑，可以设置元素的变换原点，默认是中心点，但可自定义：
img {
transform-origin: center center; /* 默认值，也可设为 left top 等 */
animation: spin 2s linear infinite;
}
如果希望动画加载完再开始，可用 animation-delay；若想鼠标悬停时才旋转，可以结合伪类：
img:hover {
animation: spin 2s linear infinite;
}
基本上就这些。掌握 transform rotate 和 @keyframes 的配合，就能轻松实现图片旋转动画，无论是加载图标、轮播装饰还是交互反馈都很实用。不复杂但容易忽略细节，比如单位和循环设置。
