使用 transform: rotate() 和 transition 可实现平滑旋转动画。1. 设置 transition 控制旋转时长与缓动；2. 在 :hover 状态下改变 rotate 值触发动画；3. 可通过 transform-origin 调整旋转中心；4. 持续旋转建议用 @keyframes 配合 animation。
使用 CSS 的 transform: rotate() 结合 transition 可以轻松实现平滑的旋转动画。关键在于设置过渡属性，让旋转变化不是瞬间完成，而是有时间地渐变。
基本语法与结构
要实现旋转动画，需要两个核心 CSS 属性：
- transform: rotate(角度)：定义元素旋转的角度，单位是 deg（度）
- transition：控制 transform 变化的过程时长和缓动方式
通常在鼠标悬停（:hover）或其他状态变化时触发旋转。
实现步骤
以下是一个常见用法示例——鼠标移上时顺时针旋转90度：
立即学习“前端免费学习笔记（深入）”；
.rotate-element {
transition: transform 0.5s ease;
}
.rotate-element:hover {
transform: rotate(90deg);
}
说明：
- transition 应写在默认状态（常态）上，表示“所有 transform 的变化都用 0.5 秒的 ease 效果过渡”
- rotate(90deg) 表示向右旋转90度，负值为逆时针，如 rotate(-45deg)
- ease 是默认缓动函数，也可换成 linear、ease-in、ease-out 等
更复杂的旋转效果
如果希望元素自动循环旋转，可以用 @keyframes 配合 transition 实现持续动画：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spin-animation {
animation: spin 2s linear infinite;
}
注意：这种属于 animation 而非 transition。transition 更适合用户交互触发的变化，比如点击或悬停。
实用技巧
一些常见优化建议：
- 添加 transform-origin 可改变旋转中心点，默认是元素中心。例如：transform-origin: left top;
- 对多个变换组合使用 transition，如同时缩放和旋转：transition: transform 0.3s
- 移动端注意性能，rotate 使用 GPU 加速，比直接修改 left/top 更流畅
基本上就这些。只要设置好 transition 和 hover 下的 rotate 值，就能实现自然的旋转效果。
