正确使用 transform: rotate() 需三点：一设 transform-origin 显式指定旋转中心（如 top center）；二在常态样式中声明 transition，而非 hover 中；三累加旋转需 js 维护角度变量并动态设置。
直接用 transform: rotate() 就能转，但多数人卡在没动画、转歪了、点多次不累加这三件事上。
rotate() 必须配合 transform-origin 显式设置旋转中心
默认是元素正中心（50% 50%），但图标收起、箭头翻转、加载动画绕底边转时，这个默认值会让人反复调试半天。比如一个下拉箭头想绕顶部中点折叠，不写 transform-origin: top center;，它就硬生生从中间“掰开”，视觉上像错位。
-
transform-origin必须写在常态样式里，不能只放在:hover或 JS class 切换里——否则首次触发或状态切换时无效 - 常用值：
top left、center bottom、20px 10px（注意空格，不是逗号） - 如果父容器有
overflow: hidden，调transform-origin比改宽高更干净，避免裁剪后还要额外留白
transition 动画必须定义在常态样式，不是 hover 里
写成 .icon:hover { transform: rotate(90deg); transition: transform 0.3s; } 是常见错误——鼠标第一次悬停时“啪”一下跳转，毫无过渡；移出时也直接弹回，因为 transition 没在默认状态声明，浏览器根本不知道该对哪个属性做缓动。
- 正确写法：
.icon { transform: rotate(0deg); transition: transform 0.3s ease; }，再在:hover里只改transform值 - 别用
transition: all 0.3s，尤其当元素同时带opacity或背景色变化时，容易触发重绘卡顿 - 移动端内联元素（如
<i></i>图标）需先加display: inline-block或block，否则transform可能静默失效
连续点击累加旋转必须用 JavaScript 控制
CSS 没有“当前角度”这个状态，:hover 和 class 切换都是瞬态的，无法记住上次转了多少度。试图靠多个 class（如 .rotated-90、.rotated-180）硬凑，第二次点击往往没反应——因为 class 覆盖逻辑混乱，且难以维护。
- 推荐在 JS 中维护一个角度变量，每次点击 += 90，然后动态设置
element.style.transform = `rotate(${angle}deg)` - 单位统一用
deg，避免旧版 Safari 对turn解析不一致；别写rotate(90)（缺单位会被忽略） - 如果只是无限匀速转（如加载图标），用
@keyframes+animation: spin 1s linear infinite更轻量，无需 JS
最易被忽略的是：所有和 transform 相关的控制（包括 transform-origin、transition、甚至 will-change）都得落在元素的初始样式上，而不是响应式状态里——这点一旦漏掉，问题就藏得深，查起来费时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
