本文详解了如何利用CSS的transition与transform:rotate()轻松实现图标旋转效果，涵盖悬停翻转、点击启停及持续循环三种实用场景：通过简单的类名控制和精准的display设置即可完成平滑交互式旋转，适用于下拉箭头、刷新按钮或加载提示；进阶部分还展示了结合@keyframes动画与JavaScript动态切换类名来实现可控的无限旋转，强调transition适合瞬时反馈、animation专长于持续动效，并提醒开发者注意过渡属性精度与元素显示模式等易忽略却关键的细节。
想让图标旋转起来，用 CSS transition 配合 transform: cursor 教程 rotate() 是最简单高效的方法。只要用户触发某个动作（比如鼠标悬停），图标就能平滑地转动，非常适合用于下拉箭头、刷新按钮或加载提示等场景。
通常使用一个带有图标的元素，比如 或 ，并加上一个类名方便控制：
你也可以用 Font Awesome 等图标库：
给图标添加基础样式，并定义旋转过渡效果：
.rotate-icon {
display: inline-block;
transition: transform 0.3s ease;
cursor: pointer;
}
.rotate-icon:hover {
transform: rotate(180deg);
}
说明：
- display: inline-block：确保 transform 正常生效
- transition: transform 0.3s ease：只对旋转做动画，持续 0.3 秒，缓动效果更自然
- transform: rotate(180deg)：悬停时转半圈，你可以改成 90deg、360deg 等
如果想实现持续旋转（比如加载状态），可以结合 @keyframes 和 transition 切换类名：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rotating {
animation: spin 1s linear infinite;
}
通过 JavaScript 动态添加类来控制：
document.querySelector(‘.rotate-icon’).addEventListener(‘click’, function() {
this.classList.toggle(‘rotating’);
});
这样点击图标就开始转，再点一下停止。
基本上就这些。transition 适合简单的交互式旋转，而 animation 更适合持续运转的场景。根据需求选择就好，不复杂但容易忽略细节，比如 display 类型和过渡属性的精准控制。
今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~
发布者：Ai探索者，转载请注明出处：https://javaforall.net/279116.html原文链接：https://javaforall.net
