transform: scale(-1, 1) 可实现标准水平镜像翻转，仅反转x轴、保持y轴不变；需注意文本不可读、子元素继承、transform-origin偏移及兼容性等问题。
用 transform: scale(-1, 1) 实现水平镜像翻转
元素水平镜像（左右翻转）最直接的方式就是对 X 轴做负向缩放。关键在于：只改 scaleX，保持 scaleY 为 1。
常见错误是只写 scale(-1)——这会同时翻转 X 和 Y，导致上下也颠倒；或者忘了重置 transform-origin，让翻转中心偏移、视觉错位。
-
transform: scale(-1, 1)是标准写法，适用于文字、图标、图片等大多数块级或行内元素 - 若元素内含文本，翻转后文字也会镜像，不可读；此时建议用伪元素或 SVG 替代，而非强行翻转文本本身
- 翻转后子元素默认继承该变换，如需子元素恢复正向，得显式加
transform: scale(-1, 1)抵消（不推荐嵌套抵消，易混乱）
垂直镜像翻转要设 scale(1, -1)
原理一致，只是负向缩放作用在 Y 轴。注意：它会让元素“头顶朝下”，常用于倒影、水印、特殊动效等场景。
容易被忽略的是：垂直翻转后，元素的 top、margin-top 等仍按原始方向计算，但视觉位置已变，可能造成布局塌陷或重叠。
- 配合
transform-origin: bottom可让翻转以底边为轴，模拟真实倒影效果 - 若元素有绝对定位且依赖
bottom: 0，翻转后需手动调整top或用translateY补偿位移 - 慎用于表单控件（如
input、select），部分浏览器渲染异常或交互失灵
镜像翻转后文字反向？用 direction: rtl 或 SVG 替代
纯 CSS 镜像会让文字变成“镜像字”，无法阅读。这不是 bug，而是 scale(-1) 的必然结果。
别试图用 scale(-1) + scale(-1) 套娃修复——那只会白忙活。真正可行的解法只有两个：
- 对文字单独包裹一层，再对其应用
scale(-1, 1)，相当于“翻转容器但不翻转文字”（实际是翻了两次） - 更稳妥的做法：把文字换成 SVG
<text></text>，用transform="scale(-1,1)"控制图形，文字内容不受影响 - 极简场景下可试
direction: rtl; text-align: right模拟右向左排版，但仅适用于字母/数字，不适用于中文
transform: scale() 的兼容性与性能提醒
所有现代浏览器都支持 scale()，包括 IE9+。但老版本 Android WebView（4.3 及更早）对 transform-origin 支持不稳，镜像中心容易偏移。
性能上，scale 属于合成层变换（composited transform），GPU 加速友好，比用 clip-path 或 canvas 绘制镜像更轻量。
- 避免在大量列表项上无差别加
scale(-1)，尤其是滚动区域里——即便不触发重排，过度图层合成仍可能掉帧 - 不要和
will-change: transform滥用组合，除非真有性能瓶颈；多数情况下浏览器自己能优化 - 如果镜像只是临时状态（比如 hover 翻转），记得在
:hover里写全transform值，否则可能因 transition 衔接失败而闪动
position、z-index、overflow）的隐式冲突——多在真实 DOM 结构里测一遍，比看文档管用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
