1. 概念与目标
1.1 旋转动画的核心要点
transform 属性是实现几何变换的基础，而 rotate 则是其中用于实现角度旋转的函数。通过将按钮的旋转轴设定在合适的 transform-origin，可以让旋转显得自然且具有可控性。旋转角度 的变化往往与用户交互场景绑定，如悬停、点击或持续动画。
在实现过程中，@keyframes 提供了对旋转过程的分阶段控制能力。使用关键帧可以把一段时间内的角度从 0 度逐步推导到目标角度，达到平滑的视觉效果。关键帧定义 使得开发者可以精确地安排每个阶段的角度、时间和缓动曲线。
下面的代码示例演示了最基本的概念：使用 transform 结合 rotate 实现简单的悬停旋转，并通过 transform-origin 定义旋转中心。将核心要点放在一起，你可以快速上手并扩展到更复杂的旋转场景。
/* 基本悬停旋转示例 */
button.rotate-on-hover {display: inline-block;transform-origin: center center; /* 设置旋转中心 */transition: transform 0.25s ease; /* 平滑过渡 */
}
button.rotate-on-hover:hover {transform: rotate(180deg); /* 悬停时旋转 180 度 */
}
2. 实现步骤与示例
2.1 基本悬停时旋转的实现
第一步是明确旋转的触发条件，在本示例中选择 悬停（:hover）。通过为按钮设置 transform-origin 与 transition，可以实现自然的过渡效果。体验导向要求旋转中心稳定、角度变化线性，避免跳跃式变化。
第二步是在按钮上应用一个简单的 CSS 规则集合，包含 rotate() 和过渡效果。你可以将这段代码直接嵌入你的样式表，并在 HTML 中绑定类名。下面展示了一个独立的示例及其用途。
/* 悬停触发的旋转代码片段 */
button.rotate-on-hover {display: inline-block;transform-origin: center center;transition: transform 0.25s ease;
}
button.rotate-on-hover:hover {transform: rotate(180deg);
}
要把这段样式接入你的按钮控件，确保你的按钮元素具备 rotate-on-hover 类，并在需要的区域使用即可。以下 HTML 片段提供了一个简单的结构示例。
<!-- 使用示例 -->
<button class="rotate-on-hover" aria-label="旋转按钮">旋转按钮</button>
3. 进阶：从单步到多阶段的旋转控制
3.1 使用 @keyframes 定义多阶段旋转
当你需要更丰富的视觉效果时，@keyframes 允许你定义多阶段的旋转路径。通过在不同帧上设定 rotate() 的角度，可以实现从起始角度到目标角度的渐进变化，并且可以结合不同的 时间百分比（0%、25%、50%、75%、100%） 指定每个阶段的持续时间与角度值。
在性能方面，GPU 加速 的触发通常发生在使用 transform 的场景。为确保动画平滑，建议添加 will-change: transform，并在需要时用 prefers-reduced-motion 来禁用动画以适配无障碍需求。
下面的示例展示了一个多阶段旋转的实现，以及如何在用户偏好设置为减少动画时进行降级处理。此方案使用 @keyframes 配合 transform 的角度控制，并通过 transform-origin 保证旋转中心不偏移。
/* 多阶段旋转的关键帧定义 */
@keyframes multiSpin {0% { transform: rotate(0deg); }25% { transform: rotate(90deg); }50% { transform: rotate(180deg); }75% { transform: rotate(270deg); }100% { transform: rotate(360deg); }
}
.btn-advanced {display: inline-block;transform-origin: 50% 50%;animation: multiSpin 6s linear infinite;will-change: transform; /* 提示浏览器进行硬件加速优化 */
}/* 浏览器对无动画偏好的兼容处理 */
@media (prefers-reduced-motion: reduce) {.btn-advanced { animation: none; }
}
<!-- 使用多阶段旋转的按钮示例 -->
<button class="btn-advanced" aria-label="高级旋转按钮">旋转</button>
