最轻量且兼容性最好的方式是用transform: rotate()配合transition实现图标旋转，需显式写90deg单位、设display: inline-block/block确保生效、transition写在常态样式中，并通过classList.toggle切换rotated类来控制状态，避免内联样式覆盖动画。
直接用 transform: rotate() 配合 transition 是最轻量、兼容性最好、也最不容易出错的方式。别一上来就写 @keyframes，多数场景根本不需要。
rotate() 旋转图标的基本写法
核心就是给图标元素加一个类，用 transform: rotate(90deg) 控制角度，再加 transition 让它动起来：
-
rotate()的单位必须是deg（度），写成90或90deg都行，但推荐显式写90deg，避免和rad混淆 - 默认以元素中心为旋转原点，不用额外设
transform-origin；如果图标偏上/偏左明显，才需微调，比如transform-origin: top left - 必须加
display: inline-block或block，否则部分内联元素（如<i>）的transform在旧版 Safari 中可能不生效
点击切换箭头方向（▶ ↔ ▼）的 JS 绑定要点
表格行展开收起这类交互，关键不在 CSS，而在 JS 如何精准切换状态：
- 别用
element.style.transform = 'rotate(90deg)'写内联样式——它会覆盖 CSS 类里的transition，导致动画失效 - 正确做法是用
element.classList.toggle('rotated')切换类，CSS 里定义.rotated { transform: rotate(90deg); } - 注意：
nextSibling可能是文本节点（换行/空格），要用element.nextElementSibling才能稳定获取下一行<tr> - 如果图标是 Font Awesome 的
<i class="fas fa-chevron-right"></i>，旋转后文字方向不变，但视觉上已足够表达状态变化
加载 Spinner 用 animation 而不是 transition
持续旋转的加载图标（比如小圆圈）必须用 @keyframes + animation，因为 transition 只响应属性变化，而加载是无始无终的循环：
立即学习“前端免费学习笔记（深入）”；
- 动画定义里写
from { transform: rotate(0deg); } to { transform: rotate(360deg); }，比只写to更稳妥，某些老浏览器对单帧声明支持不好 - 务必加
transform: translateZ(0)或will-change: transform，触发 GPU 加速，否则在低端安卓机上容易掉帧 - 别用
border做 spinner —— 高 DPR 屏幕下边缘会模糊；改用clip-path或 SVG<circle>+stroke-dasharray更清晰
真正容易被忽略的是旋转原点和渲染层提升：很多“转不动”“转得卡”问题，根源不在动画逻辑，而在没设 transform-origin 导致视觉错位，或没加 will-change 让浏览器提前分配合成层。
