使用CSS镜像文本

使用CSS操作文本使其看起来镜像或翻转是否可行？例如，我们可能希望向左而不是向右显示剪刀字符“✂”。

CSS 转换为救援

CSS 转换使得实现这个效果。要水平翻转文本，请在 x 轴上对元素进行负向缩放：

``
-moz-transform:scale(-1, 1);
-webkit-transform:scale(- 1, 1);
-o-变换: 尺度(-1, 1);
-ms-变换: 尺度(-1, 1);
变换: 尺度(-1, 1);
``

要垂直翻转文本，请在 y 轴上对元素进行负向缩放：

``
-moz-transform:scale(1, -1);
-webkit-transform:scale(1, -1);
-o-transform:scale(1,-1);
-ms-transform:scale(1,-1);
transform:scale(1, -1);
``

演示

以下是如何在实践中使用这些转换：

span{ display: inline-block; margin:1em; } 
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }

Demo text ✂
Demo text ✂

通过向元素添加相应的类.flip_H或.flip_V，您可以轻松水平或垂直翻转文本。