CSS 変換でテキストを水平方向と垂直方向に反転できますか?

CSS を使用したテキストの反転

CSS を使用してテキストを操作して、向きを反転または反転することは可能ですか?この質問は、ハサミ文字を右から左に反転するなど、特定の文字またはテキストを逆方向に表示する必要があるシナリオに遭遇したときに発生します。

答え:

はい、CSS 変換により、テキストをミラーリングまたは反転する機能が提供されます。これを実現するには、scale() 関数を使用します。

水平方向の反転:

水平方向の反転は、X 軸上のテキストの方向を反転します。まるで反対方向を向いているように見えます。これを実現するには、要素を -1 の係数で水平にスケーリングします。

<code class="css">-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>

垂直反転:

同様に、垂直方向の反転では、y 方向に沿ってテキストを反転します。 -軸、垂直方向を反転します。これを行うには、要素を垂直方向に -1 でスケールします:

<code class="css">-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>

例:

反転効果を示すために HTML と CSS を使用した例を次に示します:

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

<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>

この CSS を使用すると、最初のスパンのハサミ文字 (flip_H) が左向きで水平方向に反転され、2 番目のスパンの文字 (flip_V) が上向きで垂直方向に反転されます。

以上がCSS 変換でテキストを水平方向と垂直方向に反転できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。