最推荐用 css 类切换实现旋转动画，js 仅控制类名增删，样式逻辑交由 css 管理；避免直接操作 style.transform 导致覆盖或拼接错误，动态角度需数值累加并重置完整 rotate() 值。
用 onclick 绑定旋转逻辑最直接
HTML 按钮本身不带旋转能力，必须靠 JavaScript 控制目标元素的 CSS transform。最常用做法是在按钮的 onclick 属性里调用函数，或用 addEventListener 监听点击——后者更推荐，避免内联脚本污染结构。
常见错误是直接写 element.style.transform = "rotate(90deg)"，但这会覆盖已有 transform（比如同时有 scale 或 translate），导致其他变换丢失。
- 优先用
getComputedStyle(element).transform读取当前矩阵，再叠加旋转（适合复杂场景） - 简单场景可用自定义 data 属性记录角度，每次累加：
data-rotation="0"→ 点击后设为90、180…再写回transform - 注意：CSS
rotate()默认以元素中心为原点，如需改轴心，得配transform-origin
用 CSS 类切换比硬写 style 更可靠
硬编码 style 值容易出错，尤其要支持多次点击来回转时。给目标元素预设一个旋转类（如 .rotated），JS 只负责增删这个类，把样式逻辑全交给 CSS。
示例：
button { cursor: pointer; }
.rotated { transform: rotate(180deg); transition: transform 0.3s ease; }
对应 JS：
document.querySelector('button').onclick = () => {
document.querySelector('#target').classList.toggle('rotated');
};
-
transition必须写在被旋转的元素上，不是按钮上 - 如果旋转角度需动态变化（比如每次 +45°），仍要用 JS 计算并设
style.transform，但记得先清除类名避免冲突 - IE 10+ 支持
transform，但需加-ms-transform前缀（现在基本可忽略）
触发后无法复位？检查 transform 的叠加方式
连续点击按钮想实现“正转→反转→归位”，却卡在某个角度不动，大概率是多次赋值 style.transform 导致字符串拼接错误，比如变成 rotate(90deg) rotate(90deg) —— 浏览器只认最后一个。
- 不要用字符串拼接，改用数值累加：存当前角度到变量或
dataset，再生成完整rotate(${angle}deg) - 想彻底归零，别依赖
rotate(0deg)，直接删掉style.transform或设为空字符串 - 动画中途点击中断，可能因浏览器未完成上一帧，加
setTimeout(() => {}, 0)把操作推到下一帧可缓解
移动端点击没反应？留意 touch 事件和 active 状态
在 iOS Safari 或部分安卓浏览器上，纯 onclick 有时延迟 300ms 或完全不触发，尤其目标元素没设置 cursor: pointer 或 touch-action: manipulation。
- 给按钮加
style="cursor: pointer; -webkit-tap-highlight-color: transparent;"提升响应感 - 更稳妥的做法是监听
touchstart代替click，但注意防止 click 和 touch 同时触发（用preventDefault()或节流） - 旋转动画在低端 Android 上可能掉帧，建议用
will-change: transform提前提示渲染层
transform-origin 和 transition-timing-function 的组合影响——转得生硬还是丝滑，就差在这两行。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
