实现元素旋转动画需结合transform、@keyframes和animation。首先用transform: rotate()设置旋转角度，再通过@keyframes定义从0deg到360deg的动画帧，接着使用animation属性指定动画名称、时长、速度曲线和循环次数，如animation: spin 2s linear infinite可实现匀速无限旋转。常用于加载动画或悬停效果，注意设置transform-origin确保旋转中心正确，默认为center center。
要实现元素的旋转动画，核心是使用 CSS 的 transform 和 @keyframes 配合 animation 属性。下面介绍具体实现方法。
1. 使用 transform: rotate() 实现基础旋转
你可以通过 transform: rotate() 让元素旋转指定角度。例如让一个盒子旋转 45 度：
.box {
transform: rotate(45deg);
}
这只是一个静态旋转。如果想让它动起来，就需要加入动画。
2. 使用 @keyframes 定义旋转动画
通过 @keyframes 可以定义动画的关键帧。比如从 0 度转到 360 度：
立即学习“前端免费学习笔记（深入）”；
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
也可以写成百分比形式，便于控制中间状态：
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
3. 应用 animation 播放旋转动画
将定义好的动画应用到目标元素上，设置动画时长、循环次数等：
.box {
width: 100px;
height: 100px;
background: #3498db;
animation: spin 2s linear infinite;
}
上面代码中：
- spin 是动画名称
- 2s 表示动画持续 2 秒
- linear 表示匀速运动
- infinite 表示无限循环
4. 常见应用场景与技巧
旋转动画常用于加载图标、按钮悬停效果等。例如鼠标悬停时旋转：
.button:hover {
animation: spin 0.5s ease forwards;
}
注意：forwards 表示动画结束后保持最后一帧的状态。
若需绕中心点精准旋转，确保元素的变换原点正确：
.box {
transform-origin: center center;
}
大多数情况下默认就是中心点，但对行内元素或定位元素可能需要手动设置。
基本上就这些。掌握 rotate、@keyframes 和 animation 的组合，就能轻松做出流畅的旋转动画。不复杂但容易忽略细节，比如 transform-origin 和动画完成后的状态控制。多试几次就能熟练了。
