CSS3 : 鏡文字にして表示する方法

Facebook→ʞoodɘɔɒᖷのように英数字を鏡文字にして表示する方法|Colorless Green Ideas


ウェブページで鏡文字を使いたければ、CSS3のtransformプロパティを使うのが良いだろう。最近のブラウザならちゃんと鏡文字になるはずである。Internet Explorerの8以前やFirefoxの3以前といった古いブラウザ [2] ではうまくいかない。

まず、CSSで以下のような記述をしておく。2013年初めの状況では、ベンダープレフィックスをつけたものもちゃんと入れておいた方が良い。

.mirror-text {
-moz-transform:matrix(-1, 0, 0, 1, 0, 0);
-webkit-transform:matrix(-1, 0, 0, 1, 0, 0);
-o-transform:matrix(-1, 0, 0, 1, 0, 0);
-ms-transform:matrix(-1, 0, 0, 1, 0, 0);
transform:matrix(-1, 0, 0, 1, 0, 0);
}

あとは、HTMLで以下のように記せばそれが反転して鏡文字のようになる。

<p> class="mirror-text">これが鏡文字になります</p>


2017-10-04 追記
ベンダープレフィックスはいらない。

.mirror-text {
         transform:matrix(-1, 0, 0, 1, 0, 0);
}



関連:
Can I use|transform... Support tables for HTML5, CSS3, etc

鏡文字明朝、鏡文字ゴシック