CSS 水平翻转用 transform: scaleX(-1)，需设 display: block；垂直翻转用 scaleY(-1)；组合翻转用 scale(-1, -1)；canvas 翻转需配合 translate() 校正原点；事件坐标需手动映射。
用 CSS transform 实现图片水平翻转
HTML5 本身不提供翻转图片的原生 API，实际靠 CSS 的 transform 完成。水平翻转本质是沿 Y 轴镜像，最常用且兼容性好的写法是：transform: scaleX(-1)。
注意：必须确保图片容器（overflow: hidden 以外的裁剪限制，否则翻转后可能被截断。
常见错误现象：
display: block 或 display: inline-block。
-
scaleX(-1)不影响图片尺寸和布局流，只改变绘制方向 - 若需过渡动画，补上
transition: transform 0.3s - 旧版 Safari 需要
-webkit-transform: scaleX(-1)（iOS 12 及更早仍建议保留）
用 CSS transform 实现图片垂直翻转
垂直翻转即沿 X 轴镜像，对应 transform: scaleY(-1)。和水平翻转一样，它不改变 DOM 布局位置，仅翻转渲染结果。
立即学习“前端免费学习笔记（深入）”；
使用场景：制作倒影效果、UI 图标朝向切换（如折叠/展开箭头）、图像校正（扫描件上下颠倒）。
容易踩的坑：scaleY(-1) 会让文字也倒过来，如果图片里含 绘制内容或 SVG 子元素，需单独重置其 transform 否则一并翻转。
- 组合翻转（水平+垂直）直接写
transform: scale(-1, -1)，比两次scaleX+scaleY更高效 - 避免在
position: absolute元素上仅靠scaleY(-1)模拟“顶部对齐”，因为基线仍按原方向计算，可能导致视觉错位 - 若翻转后图片边缘模糊，可能是浏览器对 subpixel 渲染处理异常，可加
image-rendering: pixelated强制整像素缩放（适用于像素画等场景）
用 canvas API 翻转图片（需要 JS 控制）
当需要导出翻转后的图片数据（比如保存为 PNG），或动态控制翻转时机（如鼠标悬停时实时翻转 canvas 内容），就得用 + ctx.scale()。
关键点：ctx.scale(-1, 1) 实现水平翻转，但会把原点移到画布右侧，必须配合 ctx.translate(canvas.width, 0) 校正，否则图片“消失”到画布外。
const ctx = canvas.getContext('2d');
ctx.save();
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
ctx.drawImage(img, 0, 0);
ctx.restore();垂直翻转同理：ctx.translate(0, canvas.height); ctx.scale(1, -1);。
- 每次翻转前务必
ctx.save()，翻转后ctx.restore()，否则后续绘图全受影响 - 若图片有跨域资源（如 CDN 上的图片），
drawImage会触发 canvas 污染，无法调用toDataURL()—— 此时需服务端代理或确保图片响应头含Access-Control-Allow-Origin: * -
ctx.scale()是变换矩阵操作，不影响原始
翻转后保持点击区域/事件坐标正确
单纯 CSS 翻转不会改变元素的事件坐标系：点击翻转后的图片，event.offsetX 仍是按原始方向计算的。也就是说，视觉上左边是“右”，但事件坐标还是按未翻转逻辑返回。
这在做图像标注、交互式拼图等场景中极易出错。解决方案不是改事件，而是统一坐标映射逻辑：
- 水平翻转后，真实点击 X 坐标应换算为：
realX = imgWidth - event.offsetX - 垂直翻转后，真实 Y 坐标换算为：
realY = imgHeight - event.offsetY - 若用了
transform: scale(-1, -1)，两个方向都要翻，记得同时换算 X 和 Y - 避免依赖
getBoundingClientRect()直接取位置——它返回的是视觉矩形，和事件坐标系统不一致；优先用offsetX/Y+ 手动映射
真正麻烦的不是怎么翻，而是翻完之后所有依赖坐标的逻辑都得重新对齐。这点常被忽略，直到点击区域偏移才回头排查。
