CSSを使用してテキストをミラーリング/反転できますか? 質問する

CSSを使用してテキストをミラーリング/反転できますか? 質問する

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

具体的には、はさみ文字「✂」(✂)を右ではなく左に表示したいと考えています。

ベストアンサー1

これを実現するには、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);

デモ:

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>

おすすめ記事