用 CSS transform: scaleX(-1) 实现图片水平翻转最直接有效，需配合 display: block/inline-block 以确保基点准确；避免误用 scale(-1) 或 rotateY(180deg)，注意翻转后文字不可读、事件坐标系不变、overflow:hidden 可能裁剪及 SVG 外链限制。
用 CSS transform: scaleX(-1) 实现图片水平翻转
直接给 <img> 元素加 transform: scaleX(-1) 就能水平镜像翻转，这是最轻量、兼容性好（IE9+）、不影响布局的方式。
常见错误是只写 scale(-1) —— 这会同时缩放并翻转，图片变小且倒置；或者误用 rotateY(180deg)，它依赖 3D 渲染上下文，在某些旧浏览器或嵌套 transform 场景下行为不稳定。
- 必须配合
display: inline-block或block使用，因为transform对纯内联元素（如默认<img>）的基点控制不直观 - 如果父容器有
overflow: hidden，翻转后图片可能被裁剪——因翻转不改变盒模型位置，只是视觉渲染偏移 - 想保持原图点击区域/热区不变？不行。翻转后事件坐标系也镜像了，
clientX值逻辑上仍是“从左到右”，但视觉上用户看到的是反的
反转单张图片的最小可行代码
不用 JS，纯 HTML + CSS 即可生效。注意：不要给图片设固定宽高后再翻转，否则容易拉伸变形。
<img src="avatar.jpg" alt="头像" style="transform: scaleX(-1); display: block;">
更推荐写成 class 复用：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.flip-horiz {
transform: scaleX(-1);
display: block;
}
然后在 HTML 中：<img src="icon.png" class="flip-horiz">
需要同时翻转内容文字或 SVG 图标怎么办
SVG 内联时，transform: scaleX(-1) 同样有效；但若 SVG 是 <img src="logo.svg"> 引入，则只能翻转整个图片框，无法单独操作内部文字——因为外部 <img> 是一个不透明的替换元素。
- 文字需翻转：对包裹文字的
<span>或<p>应用transform: scaleX(-1)，再额外加direction: rtl防止 Unicode 双向算法干扰排版 - SVG 作为背景图时，用
background-image+background-transform不行——CSS 没这属性，得改用background配合伪元素 + transform - React/Vue 里动态控制翻转？绑定 class 即可，例如：
:class="{ 'flip-horiz': isFlipped }"
翻转后图标箭头方向错乱、文字镜像怎么处理
这是最常被忽略的副作用：翻转不是“切换图标”，而是真·镜像。比如右箭头 > 翻转后变成 <，看着是对的；但中文“返回”二字会变成字序+笔画全反，不可读。
所以业务上真正需要“切换方向”的场景，不该用 transform 翻转，而应准备两套资源或用 iconfont/svg symbol 的 direction 属性控制。例如 Font Awesome 的 fa-rotate-180 是旋转，不是镜像；Ant Design 的 icon 组件支持 rotate 和 spin，但无水平翻转 API——因为设计系统默认规避这种视觉歧义。
如果你正在调试一个已上线的翻转效果，发现按钮文字糊了、图标朝向诡异，先检查是否误把语义化内容（如带文字的按钮图标）也套进了 flip-horiz class —— 这类元素通常该用条件渲染切换 class 名，而不是靠 transform “骗过眼睛”。
