使用transform和@keyframes实现旋转动画，通过transform-origin设置旋转中心。示例：定义@keyframes改变transform:rotate()值，animation控制执行，如绕左上角旋转需设transform-origin:0 0。
在使用 CSS 实现旋转动画时，主要依赖 transform 属性来完成元素的旋转效果，结合 @keyframes 定义动画关键帧。同时，可以通过 transform-origin 来设置旋转中心点。
1. 旋转动画的基本格式属性
实现一个旋转动画需要以下核心 CSS 属性：
- animation：用于控制动画的整体行为，如名称、持续时间、重复次数等。
- @keyframes：定义动画在不同时间点的状态，其中使用 transform: rotate() 实现旋转。
- transform: rotate()：对元素进行旋转变换，单位为 deg（度）或 rad（弧度）。
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotating-element {
animation: spin 2s linear infinite;
}
这段代码让元素在 2 秒内匀速无限循环旋转一周。
2. 设置旋转中心（transform-origin）
默认情况下，元素围绕自身的中心点（50% 50%）旋转。通过 transform-origin 可以更改旋转中心位置。
立即学习“前端免费学习笔记（深入）”；
- 可使用关键词：如 center、left、right、top、bottom。
- 可使用百分比：如 0% 0% 表示左上角。
- 可使用具体长度：如 10px 20px。
.rotating-element {
transform-origin: 0 0;
animation: spin 2s linear infinite;
}
常见设置：
- transform-origin: center center; — 中心（默认）
- transform-origin: left top; — 左上角
- transform-origin: 50% 0; — 上边缘中点
- transform-origin: right bottom; — 右下角
3. 组合使用建议
为了获得更自然的视觉效果，尤其是图标、指针类元素，应根据设计需求合理设置旋转中心。例如，一个指南针指针应围绕其固定端点旋转。
完整示例：围绕左端点旋转的指针
@keyframes rotate-pointer {
0% { transform: rotate(0deg); }
100% { transform: rotate(180deg); }
}
.pointer {
transform-origin: left center;
animation: rotate-pointer 1s ease-in-out;
}
基本上就这些。掌握 rotate() 和 transform-origin 的配合，就能灵活控制各种旋转动画的效果。不复杂但容易忽略细节。
