HTML | テキストを反転表示する
HTMLだけでテキストを左右反転または上下反転で表示させる方法とサンプルコードを紹介しています。
HTMLだけでテキストを左右反転表示する
HTMLだけでテキストを左右反転表示させるにはstyle属性にて「transform」プロパティで「scaleX(-1)」を指定します。
pタグでは右寄せになってしまいますのでspanタグに指定していますが、spanタグは幅を持っていないので「display: inline-block」にてサイズを持たせています。
CSSで指定する場合は親要素で位置を調節すると楽に指定できます。
関連：CSS | テキスト・文字を左右反転表示する | ONE NOTES
<p><span style="transform: scaleX(-1);display: inline-block;">左右反転</span></p>左右反転
HTMLだけでテキストを上下反転表示する
テキストを上下反転にしたい場合は「transform」プロパティで「scaleY(-1)」を指定します。
span属性にて指定する場合は、この場合もサイズを持たせる必要があります。
<p><span style="transform: scaleY(-1);display: inline-block;">上下反転</span></p>左右反転