使用CSS的transform和transition实现按钮图标平滑旋转：1. HTML结构包含按钮与SVG图标；2. 设置transition和transform-origin，hover时rotate(180deg)实现翻转；3. 通过JS切换active类控制点击旋转；4. 注意避免闪烁、卡顿，优先使用transform优化性能。
想让按钮图标点击或悬停时平滑旋转，CSS 的 transform 和 transition 是最常用也最高效的方法。关键在于设置过渡属性，并在状态变化时触发旋转。
1. 基础结构：HTML 按钮与图标
通常使用一个按钮包含图标元素，比如用内联 SVG 或 font-icon：
2. 设置 transform rotate 与 transition
给图标设置旋转中心和过渡效果。默认不旋转，悬停时旋转 180 度：
.icon {transition: transform 0.3s ease-in-out;
transform-origin: center center;
}
.rotate-btn:hover .icon {
transform: rotate(180deg);
}
- transition 定义动画时长和缓动效果，0.3s 是常见选择
- transform-origin 确保围绕图标中心旋转，避免偏移
- rotate(180deg) 表示半圈，适合上下箭头翻转；可用 90deg、360deg 等根据需求调整
3. 控制更复杂的旋转行为
如果需要点击切换状态（比如展开/收起），可以用 JavaScript 切换类名：
立即学习“前端免费学习笔记（深入）”；
// JSdocument.querySelector('.rotate-btn').addEventListener('click', function() {
this.classList.toggle('active');
});
CSS 中定义 active 状态的旋转：
.rotate-btn.active .icon {transform: rotate(90deg);
}
- 通过 JS 控制类名，可实现非 hover 场景下的旋转，比如菜单按钮
- transition 仍作用于 transform，动画依然平滑
4. 常见问题与优化建议
- 图标闪烁或跳动？检查是否设置了 transform-origin
- 动画卡顿？避免使用
left或top实现位移，优先用transform - 想实现连续旋转？可用
@keyframes配合animation，但简单交互用 transition 更轻量
基本上就这些。用好 transform、transition 和状态控制，按钮图标的旋转效果就能自然又流畅。不复杂但容易忽略细节。
