按钮控制图片缩放旋转需用transform+状态管理，设transform-origin:center、overflow:hidden，限制scale范围（0.2–5），角度取模360°，缓存高清图并清理监听器。
直接用按钮控制图片缩放和旋转，核心是靠 transform + JavaScript 状态管理，不是改 width/height——后者会拉伸失真、无法居中、不支持旋转。
按钮触发的缩放必须锚定中心点
点击“放大”按钮后图片往左上角跑？那是没设 transform-origin: center。浏览器默认以左上角为变换原点，scale(1.2) 会把右下角撑出去，视觉上像“飞走”。
- 给图片容器（比如
<div class="viewer">）加 <code>overflow: hidden，否则缩放后边缘溢出 - 图片元素本身必须设
transform-origin: center，且该样式不能被父级transform覆盖 - 每次调用
scale()前，先重置transform字符串里的translate值，否则缩放叠加平移会错乱 - 推荐用一个对象存状态：
{ scale: 1, rotate: 0, x: 0, y: 0 }，所有按钮只更新字段，最后统一拼transform - 用
rotate += 90然后取模：rotate = rotate % 360，保持角度在 0–359 范围内 - 不要直接写
element.style.transform += 'rotate(90deg)'—— 多次执行会变成rotate(90deg) rotate(90deg)，等效于rotate(180deg)，但底层字符串拼接不可控 - 如果需支持任意角度（如拖拽旋转），用
getComputedStyle读当前transform矩阵再解析角度，但开销大；按钮场景直接维护整数变量更稳 - 硬性限制：放大上限设
5，缩小下限设0.2；低于 0.5 人眼已难辨细节，高于 5 高清图渲染模糊且 DOM 占用激增 - 按钮点击事件不加节流，用户双击或连点会触发多次
scale += 0.2，结果跳变。简单加个disabled状态：点击后立刻btn.disabled = true，动画结束后再恢复 - 别用
setTimeout模拟“动画结束”，应监听transitionend事件，它才是 CSStransform过渡完成的真实信号 - 缩略图必须带
data-large="https://xxx.com/photo@2x.jpg"，点击按钮时才把高清地址赋给预览<img> - 预览图容器要用
width: auto; height: auto;，禁用max-width类样式，让浏览器按原始宽高比缩放 - 首次加载高清图后，立即用
image.naturalWidth和容器尺寸算 fit-to-view 初始scale，而不是固定设scale=1 - 移动端 Safari 在 modal 中缩放后拖拽卡顿？给遮罩层加
-webkit-overflow-scrolling: touch
旋转按钮要区分顺时针/逆时针且避免累积误差
连续点 10 次“顺时针”，rotate(360deg) 和 rotate(3600deg) 渲染效果一样，但数值过大可能在某些旧版 Safari 触发渲染 bug 或影响后续计算。
按钮缩放必须限制范围并防抖
用户狂点“放大”按钮导致 scale 达到 100，页面卡死甚至崩溃——这不是极端情况，而是真实发生过的内存泄漏诱因。
HTML 结构里 data-large 是必须项
你点按钮放大，放大的是缩略图还是原图？如果只是对 <img src="thumb.jpg"> 执行 scale(3)，放大的是模糊的缩略图，不是用户想要的高清细节。
最易被忽略的是资源加载时机：按钮逻辑跑通后反复开关，data-large 图片会重复 new Image().src = ...，但没做缓存或 abort 旧请求，导致内存持续上涨。真正上线前，得加个 Map 缓存已加载的 Image 实例，并在关闭 modal 时清理未完成的 load 监听器。
