要实现元素旋转动画需使用CSS的@keyframes和animation属性。1. 定义@keyframes rotate360设置从0deg到360deg的旋转过程；2. 在目标元素上应用animation: rotate360 2s linear infinite实现匀速循环旋转；3. 可通过transform-origin调整旋转中心点如center top；4. 支持反向旋转、单次执行或hover触发等变体，关键在于正确使用transform: rotate()配合deg单位与动画参数。
要实现元素的旋转动画，可以通过 CSS 的 @keyframes 和 animation 属性来完成。核心是使用 transform: rotate() 配合关键帧定义动画过程。
1. 定义旋转的关键帧 (@keyframes)
使用 @keyframes 创建一个动画序列，指定元素从起始角度旋转到目标角度。
例如，实现 360 度顺时针旋转：
@keyframes rotate360 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
2. 将动画应用到元素上
在需要旋转的元素上设置 animation 属性，调用已定义的关键帧。
.rotate-element {
width: 100px;
height: 100px;
background-color: #3498db;
animation: rotate360 2s linear infinite;
}
说明：- rotate360：对应 @keyframes 的名称
- 2s：动画持续时间为 2 秒
- linear：动画速度曲线为匀速
- infinite：循环播放动画
3. 可选：控制旋转中心点
默认旋转中心是元素中心（50% 50%），可通过 transform-origin 修改。
立即学习“前端免费学习笔记（深入）”；
.rotate-element {
transform-origin: center top; /* 从顶部中心旋转 */
}
常用值：- center：居中（默认）
- left top：左上角
- right bottom：右下角
- 50% 75%：自定义百分比位置
4. 常见变体示例
反向旋转（逆时针）：
@keyframes rotateBackward {
to {
transform: rotate(-360deg);
}
}
只旋转一次（非循环）：
animation: rotate360 1s ease-out 1;
配合 hover 触发旋转：
.rotate-on-hover:hover {
animation: rotate360 0.5s ease-in forwards;
}
基本上就这些。通过组合 keyframes、transform 和 animation 属性，可以灵活控制旋转方向、速度、次数和触发方式。不复杂但容易忽略细节，比如单位写成 deg 而不是度，或忘记加 transform 才能触发旋转。
