答案：通过:hover与::before结合transform实现图标旋转，先设置伪元素样式并添加过渡效果，悬停时应用rotate()完成旋转动画。
要实现CSS元素在悬停时图标旋转，可以结合 :hover 伪类与 ::before 伪元素，并利用 transform: rotate() 来完成动画效果。这种方式常用于字体图标（如 Font Awesome）或自定义符号的动态展示。
1. 使用 ::before 插入图标并设置基础样式
通过 ::before 伪元素插入一个图标字符或使用字体图标类，先设定固定尺寸、居中对齐和过渡效果。.icon {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
font-size: 24px;
text-align: center;
line-height: 50px;
color: #333;
}
.icon::before {
content: "↻"; /* 可替换为 Font Awesome 的 \f021 等 */
font-family: "Font Awesome 6 Free"; /* 如果使用 FA */
font-weight: 900;
display: block;
transition: transform 0.3s ease; /* 添加平滑过渡 */
}2. 在 :hover 时触发旋转动画
当鼠标悬停在元素上时，对 ::before 伪元素应用 transform: rotate() 实现旋转。.icon:hover::before {
transform: rotate(180deg);
}3. 可选：实现持续旋转动画
若希望图标在悬停时持续旋转一圈，可使用关键帧动画替代静态旋转。@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.icon:hover::before {
animation: spin 0.6s linear forwards;
}这样就能在鼠标悬停时让图标平滑旋转。关键是确保 ::before 元素有 transition 或 animation 支持，且 transform 属性能被正确触发。
基本上就这些，不复杂但容易忽略过渡和定位细节。
