使用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，您可以輕鬆水平或垂直翻轉文字。