使用 transition 和 transform: rotate() 可实现元素平滑旋转，如按钮悬停90度、加载动画等，通过设置 transition 控制过渡效果，在 hover 时改变 rotate 值，浏览器自动补帧形成动画，配合 will-change 或 3D 变换可优化性能与视觉层次。
想让元素平滑地旋转起来，CSS 的 transition 和 transform: rotate() 是最佳搭档。只要设置好过渡属性，再通过状态变化触发旋转，就能轻松实现流畅的动画效果。
基本原理：过渡 + 变换
transition 控制属性变化的速度和节奏，transform: rotate() 定义元素的旋转角度。两者结合，可以让元素从一个旋转状态渐变到另一个状态。
常见使用场景包括按钮悬停旋转、图标加载动画、菜单展开收起等。
- 给元素设置 transition 属性，指定要过渡的属性（如 transform）和持续时间
- 在 hover 或其他状态中修改 transform: rotate() 值
- 浏览器自动计算中间帧，形成动画
简单示例：悬停旋转 90 度
以下代码实现鼠标移上时顺时针旋转 90 度，移出时恢复：
HTML:
<div class="rotate-box">Hover Me</div>
CSS:
.rotate-box {
width: 100px;
height: 100px;
background: #007acc;
color: white;
text-align: center;
line-height: 100px;
transition: transform 0.3s ease;
}
.rotate-box:hover {
transform: rotate(90deg);
}
transition 中的 ease 让动画开始慢、中间快、结束慢，更自然。也可换成 linear、ease-in、ease-out 等。
立即学习“前端免费学习笔记（深入）”；
进阶技巧：持续旋转与多轴变换
如果需要无限旋转（比如加载图标），可以用 @keyframes 配合 transition 触发，或直接用 animation。
但若仍想用 transition 控制启停，可以这样设计：
- hover 时切换为 infinite 旋转动画
- 或通过 JS 动态添加类名来控制
也可以结合 rotateX()、rotateY() 实现 3D 效果，记得添加 transform-style: preserve-3d 和 perspective 提升立体感。
注意事项与性能优化
rotate 属于 GPU 加速属性，性能较好。但仍建议：
- 优先过渡 transform 而非 left、top 等布局属性
- 避免对大量元素同时应用复杂过渡
- 必要时添加 will-change: transform 提前告知浏览器优化
确保 transition 时间合理，过长会让人等待，过短则不易察觉。
基本上就这些。掌握 transition 和 transform: rotate() 的配合，能让你的界面动效更生动又不失性能。不复杂但容易忽略细节，比如过渡属性写法和触发时机。多试几次，很快就能熟练。
