实现图标旋转过渡需使用CSS的transform和transition属性。通过transform: rotate()设置旋转角度，transition实现平滑动画，如:hover时旋转180度；持续旋转可用@keyframes定义无限循环动画，适用于加载图标；结合JavaScript可切换类名实现开/关状态的可逆旋转；优化细节包括设置display、调整transform-origin及使用ease-in-out曲线，推荐字体图标或SVG以保证清晰度。
要实现图标旋转的过渡效果，关键是使用 CSS 的 transform 和 transition 属性。通过设置旋转角度并添加平滑过渡，可以让图标在状态变化时自然转动。
基础旋转动画
使用 transform: rotate() 可以让图标旋转指定角度。配合 transition 可以实现过渡动画。
示例：点击或悬停时旋转 180 度
HTML:
<span class="icon">↻</span>
CSS:
.icon {
display: inline-block;
transition: transform 0.3s ease;
cursor: pointer;
}
.icon:hover {
transform: rotate(180deg);
}
持续旋转动画（加载图标）
如果需要图标一直旋转，比如做加载动画，可以使用 @keyframes 定义动画。
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading {
animation: spin 1s linear infinite;
}
可逆旋转（开/关切换）
有时需要图标在两种状态之间来回旋转，比如下拉箭头展开收起。可以通过 JS 切换类名控制。
立即学习“前端免费学习笔记（深入）”；
CSS:
.arrow {
transition: transform 0.3s ease;
}
.arrow.rotate {
transform: rotate(180deg);
}
JavaScript（可选）:
document.querySelector('.arrow').addEventListener('click', function() {
this.classList.toggle('rotate');
});
优化细节
为了让旋转更顺滑，注意以下几点：
- 设置 display: inline-block 或 block，否则 transform 可能无效
- 使用 ease-in-out 或自定义 cubic-bezier 曲线提升动效质感
- 旋转中心默认是元素中心，如需调整可用 transform-origin
- 图标建议使用字体图标或 SVG，便于缩放和渲染
