scale(-1, 1) 实现镜像翻转是因 scalex(-1) 沿 y 轴对称翻转元素，仅影响 x 轴缩放而不颠倒 y 轴；需显式指定 scale(-1, 1) 或更语义化的 scalex(-1)，避免误用 scale(-1) 导致双轴翻转。
transform: scale(-1, 1) 为什么能让元素镜像翻转
因为 transform 的 scaleX() 对 X 轴做缩放，负值会把元素沿 Y 轴对称翻转，相当于照镜子。不是“旋转”，也不是“反转 DOM 顺序”，只是视觉上的坐标系翻转。
常见错误是只写 scale(-1)，这会同时翻转 X 和 Y 轴（变成上下+左右颠倒），实际只需要 X 轴翻转，所以必须显式写成 scale(-1, 1) 或 scaleX(-1)。
-
scaleX(-1)更语义清晰，推荐优先使用 - 翻转后，子元素内的文字、图标、表单控件也会被镜像，如果不想让文字翻转，得对子元素再套一层
scaleX(-1)补偿 - 翻转不改变文档流、不触发重排，只影响渲染层，性能开销极小
镜像翻转后文字也被反向了怎么办
这是最常踩的坑：父容器加了 scaleX(-1)，里面 span、input、svg 全都反着显示，用户根本读不了。
解决方法不是去掉翻转，而是“翻两次”：外层翻，内层再翻回来。
div.mirror {
transform: scaleX(-1);
}
div.mirror > * {
transform: scaleX(-1);
}
注意：> 是关键——只作用于直接子元素；如果嵌套层级深，就得逐层补偿，或者改用 direction: rtl 配合 text-align: right 模拟（但仅对纯文本有效，不适用于图标或 Canvas）。
IE 和旧版 Safari 对 scaleX(-1) 的兼容性问题
IE10+、Edge12+、Chrome4+、Firefox3.5+ 都支持 scaleX()；但 iOS Safari rotate() 连用时）。
安全做法是避免混用：
- 单独用
scaleX(-1)，基本无兼容问题 - 如果必须组合，改用
transform: matrix(-1, 0, 0, 1, 0, 0)，它等价且兼容性更好 - IE9 及以下不支持
transform，需用filter: FlipH（仅 IE 专用，已废弃，不建议新项目用）
用 CSS 镜像翻转替代 JS 操作 DOM 的边界在哪
纯视觉翻转没问题，但一旦涉及交互逻辑，就容易出错。
比如一个翻转后的按钮，点击区域还是按原始坐标计算的——你看到按钮在右边，实际热区可能在左边；又比如用 getBoundingClientRect() 获取位置时，返回的是翻转前的几何信息，不是渲染后的位置。
- 翻转不影响
offsetLeft、getBoundingClientRect()等 API 返回值 - 事件坐标（
clientX/pageX）仍是原始坐标系，不会自动映射到镜像后视图 - 如果要做拖拽、光标定位、Canvas 绘图对齐，得手动把坐标乘以 -1 补偿
真正需要 DOM 层翻转（比如切换语言方向、适配 RTL 布局），应该用 dir="rtl" + text-align + flex-direction: row-reverse，而不是靠 scaleX(-1) 偷懒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
