css transition与transform rotate旋转动画
使用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() 结合使用，可以轻松实现平滑的旋转动画效果。不需要 JavaSc
ript，仅靠几行 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);
}
说明：
- 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 是实现轻量级旋转动画最简单高效的方式，适合按钮、图标、加载提示等场景。不复杂但容易忽略细节，掌握后能提升界面交互质感。
