点击图片实现旋转预览需用html+css+js配合：通过data-rotation记录角度，点击时+90°取模360，用style.transform更新并添加transition过渡。
点击图片后如何用纯 HTML+CSS 实现旋转预览
纯 HTML 无法直接控制图片旋转，必须配合 CSS transform: rotate() 和 JavaScript 控制类名或内联样式。常见误区是以为加个 rotate 属性就能点一下转一下——实际需要手动切换角度值并持久化状态。
- 推荐用一个
data-rotation自定义属性记录当前角度，每次点击 +90° 并取模 360 - 不要直接写
style="transform: rotate(90deg)"然后反复改字符串，容易出错；改style.transform更可靠 - 记得加
transition: transform 0.2s，否则旋转会突兀跳变
JavaScript 怎么让预览图响应式旋转（支持多次点击）
关键不是“怎么转”，而是“怎么记住转到哪了”。很多实现只转一次就卡死，是因为没更新状态变量或 DOM 属性。
- 给预览
<img>绑定click事件，读取当前dataset.rotation，转成数字后加 90，再对 360 取余 - 然后同时设置：
img.style.transform = `rotate(${newAngle}deg)`和img.dataset.rotation = newAngle - 如果预览图是模态框里的副本，注意别把原图的
dataset也一起改了——副本要单独初始化角度
移动端 touch 事件下旋转失灵？原因和修复
在 iOS Safari 或部分安卓浏览器里，click 在图片上可能不触发，尤其当图片被包裹在 <div> 且有 CSS <code>touch-action: none 时。
- 优先监听
touchend而非click，并调用event.preventDefault()防止双击缩放干扰 - 确保图片容器没有
user-select: none或-webkit-user-drag: none，否则 iOS 会禁掉事件 - 测试时打开 Safari 开发者工具 → “Disable Touch Events” 关掉，否则模拟器里永远点不动
rotate() 旋转后图片裁剪/溢出怎么办
transform: rotate() 不改变元素盒模型尺寸，旋转后若超出父容器，就会被裁掉或撑开布局——这不是 bug，是预期行为。
- 给图片外层加
overflow: hidden可隐藏多余部分，但会切掉边角 - 更合理的是给外层设固定宽高 +
display: flex; align-items: center; justify-content: center，再让图片max-width: 100%; max-height: 100% - 避免用
width: 100vw这类响应式单位做旋转容器，viewport 宽度变化时角度计算容易错位
真正麻烦的不是转多少度，而是转完之后要不要保存角度、是否要适配缩放手势、以及双指旋转和单击旋转逻辑怎么共存——这些得靠 gesturestart + transform 矩阵解析，已经超出基础预览需求了。
