CSS を使用してテキストをミラーリングする

CSS を使用してテキストを操作して、ミラーリングまたは反転して見えるようにすることは可能ですか?たとえば、ハサミ文字「✂」を右ではなく左に向けて表示したい場合があります。

CSS Transforms to the Rescue

CSS 変換を使用すると、次のことが可能になります。この効果。テキストを水平方向に反転するには、x 軸で要素を負の方向にスケーリングします。

``
-moz-transform:scale(-1, 1);
-webkit-transform:scale(- 1, 1);
-o-transform: スケール(-1, 1);
-ms-transform: スケール(-1, 1);
transform: スケール(-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 を要素に追加すると、テキストを簡単に水平または垂直に反転できます。