CSS を使用してミラーリングまたは反転したテキストを作成するにはどうすればよいですか?

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

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

CSS Transforms to the Rescue

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

``
-moz-transform:scale(-1, 1);
-webkit-transform:scale(- 1, 1);
-o-transform:scale(-1, 1);
-ms-transform:scale(-1, 1);
transform:scale(-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);
``

デモ

これらの変換を実際に使用する方法は次のとおりです:

<code class="css">span{ display: inline-block; margin:1em; } 
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }</code>

<code class="html"><span class='flip_H'>Demo text &#9986;</span>
<span class='flip_V'>Demo text &#9986;</span></code>

それぞれのクラス .flip_H または .flip_V を要素に追加することで、テキストを簡単に水平または垂直に反転できます。

以上がCSS を使用してミラーリングまたは反転したテキストを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。