transition必须写在常态样式中，否则:hover中transform无动画；transform-origin也需定义在常态样式里；rotate单位推荐统一用deg；连续旋转需js配合，纯css无法累加状态。
transition必须写在常态样式里，不能只放在:hover或:active中
很多人写完.icon:hover { transform: rotate(90deg); }发现没动画，直接“啪”一下转到位——根本原因是漏了transition。它必须定义在元素的默认状态（常态）上，浏览器才知道“当transform变化时，要走这个过渡”。写在伪类里只会对后续状态生效，鼠标移出时没有过渡，甚至首次悬停也不触发。
-
transition: transform 0.3s ease;是最安全写法，只监听transform变化，避免意外影响其他属性 - 别用
transition: all 0.3s;，尤其当元素同时有opacity或background-color变化时，容易引发重绘卡顿 - 移动端要注意：如果元素是
<i></i>或<span></span>这类内联元素，得先加display: inline-block或display: block，否则transform可能不生效
rotate角度单位选deg还是turn？别混用
rotate()支持deg、rad、turn三种单位，但同一项目里混用会增加维护成本，也容易在JS动态控制时出错。日常开发中deg最直观，turn适合整圈旋转（比如rotate(1turn)比rotate(360deg)语义更清），但千万别写成rotate(1)——缺单位会被忽略，变成无效声明。
- 顺时针转90°：
rotate(90deg)，逆时针：rotate(-90deg) - 想转两圈半？用
rotate(2.5turn)比rotate(900deg)更易读且不易算错 - JS里动态设置时，统一用
deg最稳妥，避免浏览器对turn解析差异（尤其旧版Safari）
transform-origin不设默认值，旋转中心常被忽略
默认transform-origin: 50% 50%，也就是元素正中心。但很多场景需要绕左上角、底部中点甚至自定义像素点旋转——比如菜单图标收起时绕左上角折叠，加载动画绕底部旋转。一旦没显式声明，调试时会以为是rotate本身有问题，其实只是轴心不对。
- 常用值：
top left、center bottom、20px 30px（注意空格分隔，不是逗号） - 和
transform一样，transform-origin也要写在常态样式里，否则:hover里改了也没用 - 如果父容器设置了
overflow: hidden，旋转后元素超出部分会被裁剪，这时调transform-origin比调宽高更高效
连续点击累加旋转？CSS做不到，得靠JS配合
:hover和:active都是瞬态伪类，无法保存状态。想实现“点一次转90°，再点转180°”，纯CSS无解。常见错误是试图用多个class叠加，结果发现第二次点击没反应——因为CSS没有“当前旋转角度”的概念。
- 轻量方案：JS切换
.rotated-90、.rotated-180等class，CSS里分别定义transform: rotate(90deg)等 - 灵活方案：用CSS自定义属性，如
style="--rotate: 180;，配合transform: rotate(calc(var(--rotate) * 1deg))，JS只更新变量值 - 性能提示：无论哪种方式，都别在JS里频繁写
element.style.transform = 'rotate(...)'，优先走class或CSS变量，保证GPU加速不中断
实际中最容易被忽略的，是transform-origin和transition的书写位置——它们不在交互触发的那一刻才起作用，而是在元素渲染初期就决定了动画起点和行为逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
