scalex(-1)是水平镜像首选方案，仅x轴负向缩放、不改变盒模型、兼容ie9+；需配合display:inline-block使用，避免与scale(-1)或rotate混用，事件坐标与视觉位置呈镜像关系。
直接用 transform: scaleX(-1) 就能实现水平镜像翻转，这是最轻量、兼容性好（IE9+）、不影响布局的方案；别用 scale(-1) 或 rotate(180deg)，它们不是镜像，容易出错。
为什么 scaleX(-1) 是首选
它只在 X 轴方向做负向缩放，视觉上就是“照镜子”效果，不改变元素盒模型尺寸和位置，也不触发 3D 渲染上下文，无 perspective 依赖，无 backface-visibility 兼容问题。相比 rotateY(180deg)，它在嵌套 transform、旧版 Safari、flex 容器中更稳定。
常见误操作：
- 写成
transform: scale(-1)—— 这会同时翻转 X 和 Y，图片倒置+镜像，像被旋转了 180° - 对默认
display: inline的<img>直接加scaleX(-1)—— 基点控制不稳，建议显式设display: inline-block或block - 父容器有
overflow: hidden却没预留空间 —— 翻转后图像视觉偏移，但盒模型没动，可能被裁掉
scaleX(-1) 实操要点
最小可用代码就两行，无需 JS、不改 HTML 结构：
img.mirror {
display: inline-block;
transform: scaleX(-1);
}
关键细节：
- 必须加
display: inline-block（或block），否则内联图片的 transform-origin 默认行为不可靠 - 避免同时设固定
width/height再翻转，否则可能拉伸变形；优先用max-width: 100%+ 自然宽高 - 如果图片含文字（比如 SVG 内嵌文本），文字也会镜像；需单独包裹一层再用
scaleX(-1)抵消 - 移动端无需额外适配，但若用于点击交互，记得加
cursor: pointer提升触摸反馈
垂直翻转用 scaleY(-1)
逻辑完全一致，只是作用轴不同：
img.flip-vertical {
display: inline-block;
transform: scaleY(-1);
}
注意点：
- 同样要设
display，否则基点不准 - 垂直翻转后，顶部变底部，常导致图片“头朝下”，若含文字或图标，可读性会严重下降
- 不要和
scaleX(-1)混用想凑出rotate(180deg)效果——虽然视觉相似，但坐标系翻转逻辑不同，事件响应可能错位
镜像后事件坐标不变，但视觉已反
scaleX(-1) 只改渲染，不改 DOM 坐标系。用户看到的“左边按钮”，实际 clientX 值仍是物理屏幕左侧数值。这意味着：
- 纯视觉翻转没问题，但带热区交互时（比如点击某区域触发动作），逻辑位置和视觉位置是镜像关系
- 无法通过 CSS 自动修正事件坐标；如需精准映射，得手动换算：
realX = elementWidth - event.clientX - SVG 内联时可用
<g transform="scale(-1,1)"></g>配合translate()校正，此时事件坐标与视觉一致，但仅限内联 SVG
真正难处理的从来不是怎么翻，而是翻完之后——用户点哪，程序得知道那“哪”在哪儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
