如何用CSS transition实现rotate旋转效果

transition必须写在常态样式中，否则:hover中transform无动画；transform-origin也需定义在常态样式里；rotate单位推荐统一用deg；连续旋转需JS配合，纯CSS无法累加状态。

transition必须写在常态样式里，不能只放在:hover或:active中

很多人写完.icon:hover { transform: rotate(90deg); }发现没动画，直接“啪”一下转到位——根本原因是漏了transition。它必须定义在元素的默认状态（常态）上，浏览器才知道“当transform变化时，要走这个过渡”。写在伪类里只会对后续状态生效，鼠标移出时没有过渡，甚至首次悬停也不触发。

1. transition: transform 0.3s ease; 是最安全写法，只监听transform变化，避免意外影响其他属性
2. 别用 transition: all 0.3s;，尤其当元素同时有opacity或background-color变化时，容易引发重绘卡顿
3. 移动端要注意：如果元素是或这类内联元素，得先加display: inline-block或display: block，否则transform可能不生效

rotate角度单位选deg还是turn？别混用

rotate()支持deg、rad、turn三种单位，但同一项目里混用会增加维护成本，也容易在JS动态控制时出错。日常开发中deg最直观，turn适合整圈旋转（比如rotate(1turn)比rotate(360deg)语义更清），但千万别写成rotate(1)——缺单位会被忽略，变成无效声明。

1. 顺时针转90°：rotate(90deg)，逆时针：rotate(-90deg)
2. 想转两圈半？用rotate(2.5turn)比rotate(900deg)更易读且不易算错
3. JS里动态设置时，统一用deg最稳妥，避免浏览器对turn解析差异（尤其旧版Safari）

transform-origin不设默认值，旋转中心常被忽略

默认transform-origin: 50% 50%，也就是元素正中心。但很多场景需要绕左上角、底部中点甚至自定义像素点旋转——比如菜单图标收起时绕左上角折叠，加载动画绕底部旋转。一旦没显式声明，调试时会以为是rotate本身有问题，其实只是轴心不对。

1. 常用值：top left、center bottom、20px 30px（注意空格分隔，不是逗号）
2. 和transform一样，transform-origin也要写在常态样式里，否则:hover里改了也没用
3. 如果父容器设置了overflow: hidden，旋转后元素超出部分会被裁剪，这时调transform-origin比调宽高更高效

连续点击累加旋转？CSS做不到，得靠JS配合

:hover和:active都是瞬态伪类，无法保存状态。想实现“点一次转90°，再点转180°”，纯CSS无解。常见错误是试图用多个class叠加，结果发现第二次点击没反应——因为CSS没有“当前旋转角度”的概念。

1. 轻量方案：JS切换.rotated-90、.rotated-180等class，CSS里分别定义transform: rotate(90deg)等
2. 灵活方案：用CSS自定义属性，如style="--rotate: 180;，配合transform: rotate(calc(var(--rotate) * 1deg))，JS只更新变量值
3. 性能提示：无论哪种方式，都别在JS里频繁写element.style.transform = 'rotate(...)' ，优先走class或CSS变量，保证GPU加速不中断

实际中最容易被忽略的，是transform-origin和transition的书写位置——它们不在交互触发的那一刻才起作用，而是在元素渲染初期就决定了动画起点和行为逻辑。