答案：CSS通过transform的rotate()结合@keyframes和animation实现旋转动画。.box{transform:rotate(45deg)}可旋转元素；.spin{animation:rotateAnimation 2s infinite}定义每2秒转一圈的动画；通过transform-origin可改变旋转中心点，如top center实现钟摆效果；常见应用有加载动画、悬停效果等，如.loader通过border和rotate制作旋转圆环加载提示。
在CSS中实现元素旋转动画，主要依靠 transform 属性中的 rotate() 函数，结合 @keyframes 和 animation 属性来创建平滑的动画效果。下面详细介绍具体用法和常见应用场景。
1. 基础语法：使用 transform rotate
transform: rotate(angle) 可以让元素围绕其中心点进行旋转。角度单位可以是 deg（度）、rad（弧度）、grad（梯度）或turn（圈数）。
例如：将一个元素顺时针旋转45度：
.box {
transform: rotate(45deg);
}
该属性不会影响页面布局，只改变视觉呈现。
立即学习“前端免费学习笔记（深入）”；
2. 创建旋转动画：结合 @keyframes
要实现持续的旋转动画，需要定义关键帧动画。
示例：让一个盒子持续旋转一圈.spin {
animation: rotateAnimation 2s linear infinite;
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
这段代码会让元素每2秒完成一次完整旋转，并无限重复。
3. 控制旋转中心点：transform-origin
默认情况下，元素围绕自己的中心点（50% 50%）旋转。你可以通过 transform-origin 修改旋转原点。
常用设置：- transform-origin: center top; —— 围绕顶部中心旋转
- transform-origin: 0 0; —— 围绕左上角旋转
- transform-origin: right bottom; —— 围绕右下角旋转
例如模拟钟摆效果，可设置旋转点在上方：
.pendulum {
transform-origin: top center;
animation: swing 1s ease-in-out infinite alternate;
}
@keyframes swing {
to {
transform: rotate(30deg);
}
}
4. 实际应用示例
常见的使用场景包括加载动画、按钮悬停效果、图标旋转等。
加载动画示例：.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
这个“旋转圆环”常用于页面加载提示。
基本上就这些。掌握 transform 与 animation 的配合，就能灵活实现各种旋转动效，关键是理解 rotate 的角度变化和动画时间控制。
