用 transform: scalex(-1) 可实现水平镜像翻转，本质是x轴坐标系反射变换，会真实翻转文字字形与图标，需配合 direction: ltr、transform-origin: center 并避免用于表单元素。
用 transform: scaleX(-1) 实现水平镜像翻转
直接对文本元素设置 transform: scaleX(-1) 即可完成水平镜像，但要注意：这会把文字本身（包括字形、标点、连字）全部翻转，不是“视觉上看起来像镜像”，而是真实坐标系翻转。常见错误是只加 transform 却忽略文字方向和布局干扰。
实操建议：
- 必须配合
direction: ltr（尤其对 RTL 语言如阿拉伯文、希伯来文），否则浏览器可能二次调整文本流向，导致意外偏移或重叠 - 若父容器有
text-align: center或flex布局，翻转后视觉中心可能偏移，建议额外加transform-origin: center显式锚定 - 不推荐在
input或textarea上直接使用——用户输入光标、选区渲染、IME 输入法支持会出问题
transform 缩放与 scaleX(-1) 的关键区别
scaleX(-1) 不是“缩放”，而是沿 Y 轴的反射变换（reflection），它改变的是坐标系方向，而非单纯拉伸像素。这点常被误解，导致后续动画或交互异常。
典型误用场景：
- 叠加
scale(0.8)后再加scaleX(-1)→ 实际执行顺序是矩阵相乘：scaleX(-1) * scale(0.8)=scaleX(-0.8)，X 方向缩放并翻转，Y 不变 - 用
transform: scale(-1)翻转整个块 → 文本、图标、子元素全翻，但若子元素自身有transform，会因变换矩阵叠加产生不可预测偏移 - 在 CSS 动画中用
@keyframes控制scaleX从 1 到 -1 → 浏览器会插值中间态（如scaleX(0)），文字瞬间“压成一条线”，体验突兀
兼容性与字体渲染细节
所有现代浏览器（Chrome 36+、Firefox 16+、Safari 9+、Edge 12+）都支持 scaleX(-1)，但字体渲染行为有差异：
- Windows 下部分旧版 IE（IE10/11）对 CFF 字体（如多数 Adobe 字体）翻转后可能出现 hinting 错乱，字形发虚；建议 fallback 到 TrueType 或 WOFF2
- Safari 对带有 OpenType
vert特性的中文字体（如思源黑体竖排版），scaleX(-1)可能触发竖排逻辑，导致文字错行——此时应先用text-orientation: mixed强制横排 - 若文本含 emoji 或 SVG 图标，它们也会被翻转；需要单独重置子元素：
.mirror span, .mirror img { transform: scaleX(-1); }不够，得加.mirror span { transform: scaleX(1); }
纯 CSS 方案 vs JavaScript 补偿
纯 CSS 翻转足够简单，但遇到以下情况必须 JS 干预：
- 需要响应鼠标悬停后“仅翻转文字内容，不翻转图标和数字”——CSS 无法按字符类型选择性翻转，得用 JS 拆分文本节点，对
Text节点包裹span再设scaleX(-1) - 翻转后需保持光标位置同步（如可编辑区域）——CSS 无能为力，必须监听
input事件，用getSelection()和setSelectionRange()手动校准 - 服务端生成的 HTML 已含双向 Unicode 字符（U+202D/U+202E），CSS 翻转会和 BIDI 算法冲突，造成乱序；此时应在 JS 中先 normalize 字符串，移除隐式控制符
真正麻烦的从来不是加一行 transform，而是翻转之后，你没意识到它已经悄悄改写了整个元素的几何上下文和文本流。
