1. ホーム
  2. ハイパーリンク

[解決済み】CSSでテキストをミラーリング/反転させることは可能ですか?

2022-04-01 04:48:23

質問

CSS/CSS3を使用して、テキストをミラーリングすることは可能でしょうか?

具体的には、このハサミの文字「✂」( ✂ を右でなく左に向けて表示させたいのですが。

どのように解決するのですか?

CSSの変換を利用して実現することができます。水平方向に反転させるには、divをこのように拡大縮小します。

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

そして、垂直方向の反転は、このようにdivを拡大縮小することになります。

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


DEMO:

span{ display: inline-block; margin:1em; } 
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }
<span class='flip_H'>Demo text &#9986;</span>
<span class='flip_V'>Demo text &#9986;</span>