使用 transform: rotate() 与 transition 可实现平滑旋转动画，如 .icon:hover 配合 transition: transform 0.6s 实现悬停半圈旋转，需注意优先使用 transform、避免重排并可结合 will-change 提升性能。
在网页设计中，让元素动起来能显著提升用户体验。CSS 的 transform: rotate() 与 transition 结合使用，可以实现平滑的旋转动画效果，无需 JavaScript。关键在于控制属性变化的过程，使旋转不再突兀，而是自然流畅地完成。
rotate() 实现元素旋转
transform: rotate() 用于对元素进行二维旋转。其值以角度单位表示，如 deg（度）、rad（弧度）等。
- rotate(0deg) 表示不旋转
- rotate(90deg) 表示顺时针旋转90度
- rotate(-180deg) 表示逆时针旋转180度
例如，让一个正方形盒子旋转45度：
div {
width: 100px;
height: 100px;
background: blue;
transform: rotate(45deg);
}
transition 控制变化过程
要让旋转变得平滑，必须使用 transition 属性定义过渡效果。它可设置过渡的属性、持续时间、缓动函数和延迟。
立即学习“前端免费学习笔记（深入）”；
常见写法：
div {
transition: transform 0.5s ease;
}
- transform：指定对 transform 属性应用过渡
- 0.5s：动画持续半秒
- ease：默认缓动曲线，开始慢、中间快、结束慢
结合 hover 实现交互式旋转
最常见用法是鼠标悬停时触发旋转。通过 :hover 状态切换 transform 值，并由 transition 实现渐变。
.icon {
width: 80px;
height: 80px;
background: #007bff;
margin: 50px auto;
transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
cursor: pointer;
}
.icon:hover {
transform: rotate(180deg);
}
当用户将鼠标移到 .icon 上，元素会在 0.6 秒内平滑旋转半圈。cubic-bezier 可定制更自然的动画节奏。
注意事项与优化建议
为了确保动画流畅且性能良好，注意以下几点：
- 优先过渡 transform 而非 width、height、margin 等重绘成本高的属性
- 配合 will-change: transform 提示浏览器提前优化图层
- 避免频繁触发重排，transition 应作用于支持硬件加速的属性
- 若需持续动画，考虑用 @keyframes 配合 animation，而非仅靠 transition
基本上就这些。只要掌握 transform 控制形态、transition 定义过渡节奏，就能轻松做出丝滑的旋转动效。不复杂但容易忽略细节，比如过渡属性写错或未设置初始状态，都会导致动画失效。
