用 transform: scaleX(-1) 可实现轻量可靠的水平镜像翻转，需配合 transform-origin 控制翻转中心，避免视觉错乱；注意子元素需单独抵消翻转，且交互坐标系不变。
直接用 transform: scaleX(-1) 就能水平镜像翻转图片
这是最轻量、最可靠的做法，不是“模拟”，而是真实坐标系翻转。浏览器把 X 轴方向取反，所有像素点横坐标乘 -1，视觉上就是照镜子效果。它不改变文档流、不触发重排、不影响布局尺寸，只改绘制结果。
常见错误是写成 transform: scale(-1) ——这会同时翻转 X 和 Y 轴，导致图片上下+左右全颠倒，像被旋转了 180° 再镜像一次。必须明确指定单轴：水平翻转用 scaleX(-1)，垂直翻转用 scaleY(-1)。
示例：
.flip-horiz { transform: scaleX(-1); }
.flip-vert { transform: scaleY(-1); }
翻转后文字/图标也反了？得在子元素里再翻一次
父容器加了 scaleX(-1)，里面所有内容（span、svg、input）都会被连带镜像。这不是 bug，是 transform 的继承行为。
立即学习“前端免费学习笔记（深入）”；
解决方法是“翻两次”：外层翻，内层抵消。但要注意选择器范围：
- 只对直接子元素补偿：
.mirror > *+transform: scaleX(-1) - 如果嵌套深（比如
div > div > p > span），逐层写太麻烦，建议重构结构，或改用direction: rtl+text-align: right仅处理纯文本（对图标、Canvas 无效） - 别用
transform: scale(-1, -1)去“修复”，那只是让整个子树再翻一倍，逻辑更混乱
transform-origin 不设好，翻转会“甩出去”
默认以元素左上角为原点，scaleX(-1) 会让元素从左边“弹”到右边，视觉错乱。尤其做 hover 动画时，不加控制就像被拽着一角甩过去。
正确做法是显式设锚点：
- 居中翻转（最常用）：
transform-origin: center - 从右边缘翻转（类似门扇关闭）：
transform-origin: right center - 从底部翻转（适合倒影）：
transform-origin: center bottom
注意：transform-origin 必须和 transform 写在同一规则里，否则可能被覆盖或失效。
和 rotate 连用时，顺序决定最终效果
比如想让图片先倾斜再镜像，写成 transform: rotate(15deg) scaleX(-1) 和 transform: scaleX(-1) rotate(15deg) 渲染结果完全不同——因为 transform 是按书写顺序从右到左叠加的（数学上是矩阵右乘）。
实操建议：
- 镜像类操作（
scaleX/scaleY）尽量放在前面，语义清晰且容易预测 - 动画中混用多个 transform，务必固定顺序，避免 JS 动态拼字符串时顺序错乱
- 极端兼容需求下（如旧版 iOS Safari），可改用
transform: matrix(-1, 0, 0, 1, 0, 0)，它等价于scaleX(-1)且更稳定
真正容易被忽略的，是翻转后交互坐标系没变：你看到按钮在右边，getBoundingClientRect() 返回的 left 值仍是原始位置；拖拽时鼠标偏移要手动 × -1 补偿。视觉翻转 ≠ 坐标翻转。
