最直接可靠的方式是用 button 触发 style.transform = rotate()，需用变量或 data-rotation 持久化角度、每次更新后统一赋值，避免字符串拼接、负数未取模、transform-origin 偏移及点击并发错乱。
用 button 触发 style.transform = rotate() 是最直接可靠的方式
不需要框架、不依赖第三方库，纯原生 JS 就能精准控制图片旋转角度。关键不是“能不能转”，而是“角度怎么存、怎么加、怎么防错”。很多人写 this.style.transform = 'rotate(90deg)' 后再点一次就失效——因为没覆盖上次的字符串，或者没做取模，导致角度变成 rotate(180deg)rotate(90deg) 这种非法值。
正确做法是：用一个变量或 data-rotation 属性持久化当前角度，每次点击按钮只更新这个值，再统一赋给 style.transform：
let angle = 0;
document.getElementById('rotate-left').onclick = () => {
angle = (angle - 90 + 360) % 360;
img.style.transform = `rotate(${angle}deg)`;
};
document.getElementById('rotate-right').onclick = () => {
angle = (angle + 90) % 360;
img.style.transform = `rotate(${angle}deg)`;
};-
angle必须声明在事件外，否则每次点击都重置为 0 - 左旋用
(angle - 90 + 360) % 360避免负数（如 -90 → 270） - 不要拼接字符串到已有
transform值上，style.transform是覆盖式写入 - 如果图片同时有缩放或平移，
rotate()必须和其他变换一起写，例如scale(1.2) rotate(45deg)
为什么不能只靠 CSS 类名切换来实现左右旋转
类名切换（如 img.classList.toggle('rotated-90')）看似简洁，但左右旋转需要**状态记忆**和**角度叠加**，而 CSS 类是静态的。你没法用一个类表示“当前是 270°，再点右旋就变 0°”，除非预定义 4 个类（rotated-0、rotated-90…），但这会让 HTML 膨胀、JS 逻辑变重、维护困难。
更实际的问题是：用户连点两次“右旋”应该回到原位，但若用类名 toggle，第二次会把类名删掉，图片直接跳回 0°，中间 90° 状态丢失——这不是旋转控制，是开关模拟。
立即学习“前端免费学习笔记（深入）”；
- 类名适合「开/关」「显/隐」这类二值状态，不适合多态角度
- 若坚持用类，必须配合 JS 动态增删多个类，并用
getComputedStyle反查当前角度，得不偿失 -
data-rotation属性才是轻量又语义清晰的状态载体：<img data-rotation="180">
transform-origin 不设默认就是中心点，但左右旋转时容易被忽略
图片绕中心旋转，视觉上是对称的；但如果你改过 transform-origin（比如设成 top left），再点“左旋”就会发现图片突然往左上角缩进去，甚至部分消失——不是 JS 错了，是支点偏了。
左右旋转功能默认应保持视觉锚点稳定，所以除非有特殊动效需求（如翻页、抽屉式旋转），否则别碰 transform-origin。如果真要调，务必在 JS 更新 transform 前同步设置：
img.style.transformOrigin = 'center center';
img.style.transform = `rotate(${angle}deg)`;- 浏览器对
transform-origin的默认值是50% 50%，等价于center center - 设成
0 0或top left后，旋转会以左上角为圆心，图片右下区域大幅位移，常被误判为“转不动” - 父容器若带
overflow: hidden，支点偏移后旋转溢出更明显，可能整张图“消失”
移动端点击延迟与快速连点会导致角度错乱
在手机上，click 事件有约 300ms 延迟，且用户容易双击或连点，导致 JS 还没执行完下一次 click 就已触发，angle 变量被并发修改，最终角度错乱（比如点了两下右旋，期望是 180°，结果变成 90° 或 270°）。
简单有效的防抖方式不是引入 debounce 库，而是用 CSS 状态临时禁用按钮：
const btn = document.getElementById('rotate-right');
btn.onclick = () => {
btn.disabled = true;
// …旋转逻辑
setTimeout(() => btn.disabled = false, 300);
};-
disabled比pointer-events: none更可靠，它直接阻断事件流，不依赖样式生效时机 - 300ms 足够覆盖动画过渡时间（通常
transition: transform 0.3s） - 如果用了
animation替代transition，需监听animationend事件后再启用按钮 - 不建议用
touchstart替代click，除非你同时处理touchcancel和touchend防止误触
真正难的不是让图片转起来，而是让每一次点击都可预期、可回溯、不累积误差。角度值必须单一可信源（变量或 dataset），变换必须完整覆盖，支点必须明确可控——这些细节一旦漏掉，用户点十次，效果可能只对三次。
