CSS 変換を使用してテキストを水平方向および垂直方向に反転するにはどうすればよいですか?

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

CSS では、変換を使用してテキストやその他の要素を操作できます。一般的な変換の 1 つはミラーリングであり、反転とも呼ばれます。この効果は、単純な CSS プロパティを使用して実現できます。

テキストを水平方向に反転 (垂直軸を横切ってミラーリング) するには、次の 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);

このプロパティは、要素を水平方向に -1 スケールして、垂直軸に沿って効果的に反転します。

同様に、テキストを垂直方向に反転 (水平軸を横切ってミラーリング) するには、次のプロパティを使用します:

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

このプロパティを適用すると、要素を垂直方向に -1 だけスケーリングし、水平軸に沿って反転します。

例

テキストとハサミ文字を表示する次の HTML コードを考えてみましょう:

デモ テキスト ✂

span{ 表示: インラインブロック;マージン:1em; }

.flip_H{ 変換: スケール(-1, 1);色: 赤; }

.flip_V{ 変換:scale(1, -1);色:緑; }


これにより、はさみのキャラクターがそれぞれの軸に沿ってミラーリングされ、目的の左向きのはさみが作成されます。

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