使用CSS transition与transform: rotate()可实现无需JavaScript的平滑旋转动画。通过transition定义旋转过渡效果，transform: rotate()设置旋转角度，结合hover等状态触发，使元素在0度与目标角度间平滑切换。默认旋转中心为元素中心，可用transform-origin调整，如绕左上角或实现rotateY三维翻转。推荐使用transform和opacity以获得GPU加速，避免对布局属性添加过渡，并可通过will-change: transform提升性能。支持deg、rad、turn等单位，适用于图标、按钮等交互反馈场景，是轻量高效的动画方案。
CSS 的transition和transform: rotate()结合使用，可以轻松实现平滑的旋转动画效果。不需要 JavaScript，仅靠几行 CSS 就能让元素在状态变化时优雅地旋转。
transition 与 transform rotate 的作用transform: rotate()用于对元素进行二维旋转，单位是 deg（度）。例如 rotate(45deg) 表示顺时针旋转 45 度，rotate(-90deg) 表示逆时针旋转 90 度。
transition控制属性变化时的过渡效果，比如让旋转过程缓慢进行而不是瞬间完成。
两者结合，可以让元素在 hover 或类名变化时，平滑地从一个旋转角度过渡到另一个角度。
立即学习“前端免费学习笔记（深入）
”；
基础用法：hover 触发旋转以下是一个常见例子：鼠标悬停时，方块顺时针旋转 180 度。
.example {width: 100px;height: 100px;background: #3498db;transition: transform 0.6s ease;}.example:hover {transform: rotate(180deg);}
说明：
Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载transition 写在默认状态中，表示所有 transform 变化都应用这个过渡ease 是默认缓动函数，也可以换成 linear、ease-in、ease-out 等rotate(180deg) 是目标角度，鼠标移开后会自动转回 0 度进阶技巧：控制旋转中心与多轴旋转默认情况下，旋转中心是元素中心（50% 50%），可通过transform-origin修改。
例如让元素绕左上角旋转：
.example {transform-origin: top left;transition: transform 0.5s ease;}.example:hover {transform: rotate(90deg);}也支持三维旋转，如绕 Y 轴翻转：.flip {transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);}.flip:hover {transform: rotateY(180deg);}注意事项与性能建议为了动画更流畅，注意以下几点：优先使用 transform 和 opacity 做动画，它们由 GPU 加速，性能更好避免对 width、height、margin、left 等触发布局或重绘的属性做 transition可添加 will-change: transform 提示浏览器提前优化rotate 支持小数，如 rotate(0.5turn) 等同于 rotate(180deg)，也可用 rad 或 turn 单位基本上就这些。transition 搭配 transform rotate 是实现轻量级旋转动画最简单高效的方式，适合按钮、图标、加载提示等场景。不复杂但容易忽略细节，掌握后能提升界面交互质感。