使用 transform: rotate() 与 transition 可实现图标平滑旋转动画。1. 用 span 或 i 标签作为图标容器；2. 设置 transition: transform 0.3s ease 控制动画时长与节奏；3. 通过 .icon:hover { transform: rotate(180deg); } 实现悬停时旋转；4. 可选设置 transform-origin 调整旋转中心点，如从左上角旋转。整个过程无需 JavaScript，性能佳，适用于箭头、按钮等交互反馈场景。
想让图标平滑旋转，比如在用户悬停时转动一个箭头或刷新图标，可以用 transform: rotate() 搭配 transition 实现流畅的动画效果。关键在于设置过渡属性，并在触发条件（如 hover）下改变旋转角度。
1. 基础结构：准备图标元素
通常使用一个 span 或 i 标签来显示图标，也可以用伪元素。这里以一个简单的箭头图标为例：
<span class="icon"></span>2. 设置初始样式与过渡
给图标设置基本样式，并启用 transition 来控制 transform 的变化速度：
.icon {display: inline-block;
width: 24px;
height: 24px;
background: url('arrow.png') no-repeat center;
background-size: contain;
transition: transform 0.3s ease;
}
transition: transform 0.3s ease; 表示所有 transform 变化将在 0.3 秒内以缓动方式完成。
立即学习“前端免费学习笔记（深入）”；
3. 使用 :hover 触发旋转
当鼠标悬停时，通过 transform: rotate() 改变图标的旋转角度：
.icon:hover {
transform: rotate(180deg);
}
此时，图标会在鼠标移上时顺时针旋转半圈，移开后自动转回。你也可以使用 rotate(90deg)、rotate(360deg) 等实现不同角度的旋转。
4. 可选：设置变换原点
默认旋转中心是元素中心。如果需要改变旋转轴心，使用 transform-origin：
.icon {transform-origin: center center; /* 默认值，可省略 */
}.icon {
transform-origin: left top; /* 从左上角旋转 */
}
根据图标布局调整原点，可以获得更自然的动画效果。
基本上就这些。搭配 transition 和 transform: rotate()，能轻松实现图标旋转动画，无需 JavaScript，性能好且兼容性高。常见用于下拉箭头、加载按钮、菜单开关等场景。
