使用transform和@keyframes可实现按钮旋转动画：1. transform: rotate配合transition实现悬停平滑旋转；2. @keyframes定义关键帧实现持续旋转或摆动；3. 通过animation属性控制时长、方向、重复等行为；4. 建议用于加载提示，注意旋转中心、性能优化及减少动画偏好适配。
想让按钮在点击或悬停时产生旋转效果，css 提供了简单高效的方式：结合 transform: rotate() 与 @keyframes 配合 animation 属性来控制动画过程。这种方式无需 javaScript，性能好，兼容性强。
1. 使用 transform: rotate 实现基础旋转
transform: rotate() 可以让元素绕其中心点旋转指定角度。比如让按钮默认旋转45度：
.button { transform: rotate(45deg); }这只会静态旋转，若要动态效果，需搭配 transition 实现平滑过渡，例如鼠标悬停时旋转：
.button { transition: transform 0.3s ease; } <p>.button:hover { transform: rotate(180deg); }</p>这样按钮在鼠标移入时会顺滑地转半圈，移出时再转回来。
立即学习“前端免费学习笔记（深入）”；
2. 使用 @keyframes 定义复杂旋转动画
如果需要更精细的控制，比如持续旋转、来回摆动或分阶段转动，应使用 @keyframes 定义关键帧动画。
例如实现一个无限循环的旋转加载效果：
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } <p>.loading-button { animation: spin 1s linear infinite; }</p>这个动画会让按钮持续匀速旋转，适合用在加载状态中。
3. 控制动画的播放时机与行为
通过 animation 的多个子属性，可以精确控制动画表现：
- animation-duration：动画持续时间，如 2s
- animation-timing-function：速度曲线，如 ease-in-out
- animation-delay：延迟多久开始
- animation-iteration-count：重复次数，infinite 表示无限
- animation-direction：方向，如 alternate 实现来回摆动
- animation-play-state：可控制暂停（paused）或运行（running）
例如让按钮点击时旋转并暂停动画，可通过 js 切换 class 实现：
@keyframes swing { 0% { transform: rotate(0deg); } 50% { transform: rotate(30deg); } 100% { transform: rotate(0deg); } } <p>.animated-button { animation: swing 0.5s ease forwards; }</p><p>.animated-button.paused { animation-play-state: paused; }</p>4. 实际应用建议
旋转动画适合用于加载提示、图标切换、交互反馈等场景。注意以下几点提升体验：
- 避免过度使用旋转，以免干扰用户注意力
- 配合 transform-origin 调整旋转中心点，如 left top
- 在移动端考虑动画对性能的影响，优先使用 will-change 或 translateZ 优化
- 为辅助功能考虑，可通过 prefers-reduced-motion 减少动画
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }基本上就这些。利用 transform rotate 和 @keyframes，你可以灵活实现各种按钮旋转效果，关键是理解动画流程和控制方式。不复杂但容易忽略细节。