使用CSS animation与rotate结合可实现无需JavaScript的流畅旋转效果，如加载动画、按钮悬停反馈等。通过@keyframes定义关键帧，设置transform: rotate()控制角度变化，再用animation属性绑定动画，常用参数包括名称、时长、速度曲线和循环次数。例如.loader类创建圆形加载器，持续匀速旋转；也可配合transition实现悬停微交互，如图标旋转15度。注意transform-origin可调整旋转中心，默认为元素中心点。
CSS 动画（animation）与 rotate 旋转功能结合，可以实现流畅且高效的视觉效果，常用于加载图标、按钮悬停反馈、动态导航等场景。通过 @keyframes 定义动画帧，并使用 transform: rotate() 控制元素旋转角度，无需 JavaScript 即可完成生动的交互效果。
基本语法与关键帧定义
要创建一个旋转动画，先用 @keyframes 指定旋转过程中的状态。rotate() 接收角度值，如 deg（度）、rad（弧度）等。
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
上面代码定义了一个名为 spin 的动画，使元素从 0 度旋转到 360 度。也可以写成百分比形式，便于控制中间状态：
@keyframes spin {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
应用动画到元素
定义好关键帧后，通过 animation 属性将动画绑定到目标元素上。常用属性包括动画名称、持续时间、重复次数、时间函数等。
立即学习“前端免费学习笔记（深入）”；
.loader {
width: 50px;
height: 50px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
这段样式创建一个圆形加载器，顶部边框为蓝色，通过持续旋转产生加载动效。其中：
- animation: spin —— 引用前面定义的动画名称
- 1s —— 动画持续1秒
- linear —— 匀速运动
- infinite —— 无限循环
实用技巧与常见应用场景
rotate 动画不仅限于整圈旋转，还可用于微交互设计，提升用户体验。
- 按钮悬停旋转：轻微旋转增加点击提示感
- 菜单图标动画：三道杠图标点击时变为“X”可结合 rotate 和 transition
- 指示箭头转动：下拉刷新时箭头随滚动角度变化而旋转
例如，让一个图标在悬停时顺时针转 15 度：
.icon {
transition: transform 0.3s ease;
}
.icon:hover {
transform: rotate(15deg);
}
这里虽然没用 animation，但 rotate 配合 transition 实现了简单交互动画。若要用 animation 实现更复杂的路径或节奏，仍推荐使用 @keyframes。
基本上就这些。掌握 rotate 与 animation 的配合，能大幅提升界面活力，关键是理解 transform 的作用机制和动画时间控制。不复杂但容易忽略细节，比如是否设置 transform-origin 影响旋转中心点位置，默认是元素中心，若需调整可用：
animation-origin: top left;
