transform: scalex(-1)能让图片镜像但文字也镜像，因它是沿y轴的坐标系反射变换，作用于整个渲染盒；若需仅镜像图片而保留文字正常，须将图文分离并单独对img应用该样式。
为什么 transform: scaleX(-1) 能让图片镜像但不翻转文字
因为 scaleX(-1) 是对元素进行水平方向的缩放变换，负值会沿 Y 轴翻转整个渲染盒（包括子内容）。它不影响文档流、不改变 DOM 结构，也不触发重排，只作用于绘制层——所以图片被镜像，而如果容器里有文字，文字也会镜像（变成反向字形），这点常被忽略。
常见误用场景：仅给 <img> 标签加 transform: scaleX(-1)，结果发现旁边的文字也反了；或在响应式布局中直接写死，导致横屏时镜像逻辑错乱。
- 必须确保目标元素是独立渲染上下文（比如加
display: inline-block或display: block），否则transform在某些旧版浏览器中可能失效 - 若需镜像图片但保留正常文字，应把图片和文字拆成不同元素，只对
<img>应用该样式 - 注意：Chrome 早期版本（inline 元素的
transform支持不稳定，建议显式设置display
如何避免镜像后图片位置偏移
transform 默认以元素中心为原点缩放，scaleX(-1) 会让元素视觉上“向左滑出”半个自身宽度——尤其当图片是 inline 元素时，容易和前后文本错位。
解决方法是显式控制变换原点，或用 transform-origin 配合定位微调：
- 最稳妥：加
transform-origin: center（默认值，但显式声明可避免 CSS 重置干扰） - 若需保持左对齐，可改用
transform-origin: left center，再配合margin-left: -2px类微调（数值取决于图片宽度） - 更干净的做法是包裹一层
<div style="display: inline-block">，然后对内层 <code><img>单独设transform，外层控布局示例：
<div style="display: inline-block"> @@##@@ </div>
IE 和 Safari 旧版本兼容性要注意什么
transform: scaleX(-1)在 IE9+ 和 Safari 3.1+ 均支持，但需要前缀才能在 IE9–10 和 Safari ≤6.1 中生效。- IE9 必须加
-ms-transform: scaleX(-1) - Safari ≤6.1 需要
-webkit-transform: scaleX(-1) - 现代写法应同时写三行（顺序建议：标准属性放最后）
示例（安全写法）：
img.mirror { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); }注意：IE10+ 已支持无前缀
transform，但若项目仍需兼容 IE9，则前缀不可省；Safari 7+ 可安全省略-webkit-。用 JavaScript 动态控制镜像开关时的坑
用 JS 切换
transform值看似简单，但容易踩两个隐性问题：一是多次重复设置导致样式叠加（如连续点击触发两次scaleX(-1)），二是未清除内联样式影响后续 CSS 覆盖。- 推荐用 class 切换而非直接操作
style.transform，例如el.classList.toggle('mirror') - 若必须用 JS 设置，记得先清空再赋值：
el.style.transform = 'scaleX(-1)'，不要写成+=或拼接 - 动画场景下，
scaleX(-1)本身不触发动画，需配合transition: transform 0.2s才有过渡效果
特别注意：Vue/React 等框架中，直接绑定
style对象时，transform的值必须是字符串（如{ transform: isMirrored ? 'scaleX(-1)' : 'scaleX(1)'），不能写数字或布尔值。镜像不是“左右翻转”的语义操作，而是纯视觉变换——它不改变图片的
width、height、坐标或事件区域，点击位置仍按原始布局响应。这点在做图像标注或交互热区时最容易被忽略。
- IE9 必须加
