scaleX(-1) 通过将元素X轴坐标全部取反实现镜像，本质是CSS坐标系变换而非视觉滤镜；它不改变文档流与事件坐标，需嵌套反转文字以保持逻辑正常，兼容性较好但旧版浏览器和WebView存在渲染异常。
transform:scaleX(-1) 为什么能让元素镜像？
它不是“翻转”，而是沿垂直中线做缩放：scaleX(-1) 把元素的 X 轴坐标全部取反，左边变右边，文字顺序、图片左右都倒过来。本质是 CSS 坐标系变换，不是视觉滤镜。
注意：scaleX(-1) 不改变文档流位置，也不影响子元素的事件坐标（比如点击区域仍按原位置响应），这点常被忽略。
- 只对块级或行内块元素生效最稳定；
display: inline文字可能不完全反转（浏览器处理不一致） - 如果父容器设置了
overflow: hidden，镜像后超出部分会被裁掉——因为变换不移动元素盒模型边界 - 动画中慎用：某些旧版 Safari 对
scaleX(-1)+transition组合有重绘异常
文字镜像后顺序也反了，怎么只翻图形不翻文字？
直接上 scaleX(-1) 会让中文、英文、数字全倒着读，多数场景这不是想要的。真正需要的是「视觉镜像」+「逻辑正常」，得靠嵌套反转补救。
典型做法：外层镜像，内层再镜像一次文字：
立即学习“前端免费学习笔记（深入）”；
.mirror {
transform: scaleX(-1);
}
.mirror .text {
transform: scaleX(-1);
}
这样图形和容器翻了，文字又翻回来。但要注意层级和继承：
- 必须确保
.text是.mirror的直系或后代元素，且未被其他 transform 覆盖 - 如果用了
transform: rotateY(180deg)替代，它会同时翻文字和图形，且不支持 IE，兼容性更差 - Flex 或 Grid 容器内部用
scaleX(-1)可能打乱主轴方向，建议先转为display: block再操作
镜像后点击区域错位或 hover 失效？
这是最常踩的坑：scaleX(-1) 只改渲染，不改 hit-testing 区域（即浏览器判定鼠标在哪的逻辑）。结果就是你看着鼠标在按钮右边，实际触发的是左边。
根本原因：CSS transform 不影响 box model 和事件坐标系，事件仍按原始布局计算。
- 解决方案一：用
direction: rtl+text-align: right配合transform: scaleX(-1)，对纯文本容器更可靠 - 解决方案二：改用伪元素生成镜像（
::before+content+transform），原元素保留交互区 - 绝对定位元素加
scaleX(-1)后，left/right值含义不变，但视觉位置反了——别靠 left/right 调整镜像后的位置
IE 和旧版 Edge 怎么兼容？
transform: scaleX(-1) 在 IE9+ 和 Edge 12+ 都支持，但需要加前缀：
.mirror {
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
IE8 及以下不支持 transform，只能退到滤镜方案（不推荐）：
.mirror {
filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}
但这个滤镜只对图片/块元素有效，文字照样乱，且已废弃多年。现在基本可以放弃 IE8–9 兼容。
真正要小心的是移动端 UC 浏览器（老版本）和部分安卓 WebView：它们对 transform 的硬件加速支持不稳定，镜像后可能出现模糊或闪烁，加 will-change: transform 有时反而更糟。
