CSS旋转需分场景：静态用transform: rotate()；交互用transition；自动旋转用@keyframes+animation；支持多变换组合及3D旋转，注意单位、原点和兼容性。
直接写 transform: rotate(45deg) 只会让元素静态转到那个角度，不会动起来。想让它真正“旋转”，得明确告诉浏览器：什么时候开始、转多少、花多久、要不要重复——这些靠 CSS 动画机制来完成。
基础静态旋转：让元素固定转一个角度
这是最简单的用法，适合图标指示、布局微调等不需要动的场景：
- 单位必须写全，比如
rotate(45deg)✅，rotate(45)❌（浏览器直接忽略） - 正数顺时针，负数逆时针：
rotate(-90deg)就是逆时针转 90 度 - 支持多种单位：
rotate(0.25turn)（四分之一圈）、rotate(1.57rad)（约 90 度），推荐用deg或turn，更直观 - 默认绕元素中心（
50% 50%）转；想绕左上角？加一句transform-origin: 0 0;
鼠标悬停平滑旋转：用 transition 实现交互反馈
适合按钮、卡片、菜单项等需要用户触发的轻量动画：
- 给元素设初始状态和 hover 状态，中间靠
transition衔接 - 例如：
.icon { transform: rotate(0deg); transition: transform 0.3s ease; }，再写.icon:hover { transform: rotate(90deg); } - 注意只对
transform做过渡，别混进width、left这类会触发重排的属性，否则容易卡顿 - 如果元素是 inline（比如
<span>），先加display: inline-block，不然transform-origin可能不生效
自动持续旋转动画：用 @keyframes + animation
适用于加载图标、轮播指示器、装饰性动效等需要自主运行的场景：
立即学习“前端免费学习笔记（深入）”；
- 先定义关键帧：
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } - 再把动画应用到元素上：
animation: spin 2s linear infinite;（2 秒一圈，匀速，无限循环） - 漏掉
@keyframes定义，或者没写单位，动画就完全不启动，控制台也不会报错，容易排查困难 - 想控制旋转支点？在动画元素上同时设
transform-origin，比如transform-origin: center top;模拟钟摆效果
组合变换与 3D 旋转注意事项
不只是平面转，还能叠加缩放、位移，甚至翻转：
- 多个变换写在同一行：
transform: rotate(30deg) scale(1.2) translateX(10px);，顺序影响最终效果（先转再缩，和先缩再转不一样） - 要用
rotateX、rotateY做 3D 翻转，父容器必须设transform-style: preserve-3d;，且自身不能是 inline 元素 - 垂直翻转文字推荐用
transform: scaleY(-1);，比rotateX(180deg)兼容性更好、更稳定 - 所有
transform操作都不影响文档流，不会挤占其他元素位置
