皆さま引き続きコロナには気をつけてお過ごしください！

【HTML/CSS】文字を反転させたいときはどうする？

反転 HTML/CSS

普通のブログでは文字を反転させることはあまりないと思いますが、

おしゃれのために文字に角度を付けたい！とか、

反転の説明をしたい！ということは0ではないですね。

 

今回、以下PowerPointに関する記事を作成していたときに、

反転の書き方を調べましたので、ご紹介したいと思います。

【PowerPoint】グラフの色を変えよう
グラフは作れても、デフォルトの色だと、 伝えたいことが伝わりづらい💦　ということがあります。 今回は、グラフの色を変える方法をご紹介したいと思います。 まとめて変更する PowerPointでは、グラフのすべ...
nekopress.castelodelego.org
2021.08.14

反転

 

contents
  1. 方法①サイトサービスを使う
    1. rot180
    2. Lunicode
  2. 方法②CSSを使う
    1. 横方向
    2. 縦方向
    3. 縦横両方向
    4. 奥行方向
  3. カスタマイズしよう
    1. 横方向に60°
    2. 縦方向に60°
    3. 縦横両方向に60°
    4. 奥行方向に60°
  4. まとめ
スポンサーリンク

方法①サイトサービスを使う

文字を入力させるだけで、文字を反転させることができます。

 

rot180

このサイトでは、180°回した状態にすることができます。

ただし、日本語の場合は、180°回した状態にはならず、

鏡を横に置いたときのように反転させた状態になります。

結果をコピーして使うことができます。

Rot180 encoder
www.logarithmic.net

rot180

 

Lunicode

このサイトでは、180°回した状態にすることができるほか、

鏡を横に置いたときのように反転させたり、

1文字ずつ丸〇で囲ったりさせることができます。

ただし、日本語の場合は、180°回した状態にはならず、

鏡を横に置いたときのように反転させた状態になります。

また、囲み文字は文字の横に〇が置かれるのみとなります。

 

結果をコピーして使うことも、

HTML用の特殊コードをコピー使うこともできます。

Lunicode
lunicode.com

 

upside down

180°回転

 鏡 

鏡

 丸 

丸

 囲み四角 

囲み四角

スポンサーリンク

方法②CSSを使う

では、それ以外の角度で自由に表示させたい場合はどうすればいいでしょうか？

そうなると、CSSの出番ですね。

では、下の内容を順番にやってみましょう。

反転

 

横方向

文字の横に鏡を置いたときのように表示させます。

猫Press猫Press 

猫Press＜span class="rotateY180"＞猫Press＜/span＞

※「＜」「＞」は必ず半角に変えてくださいね。

/* Y軸(垂直方向の軸)を基準にして180度回転 */
.rotateY180 {
   display: inline-block;     /* インラインブロック化 */
   transform: rotateY( 180deg );
   -moz-transform:    rotateY( 180deg );  /* Firefox用 */
   -webkit-transform: rotateY( 180deg );  /* Chrome,Safari,新しいOpera用 */
   -o-transform:      rotateY( 180deg );  /* 古いOpera用 */
   -ms-transform:     rotateY( 180deg );  /* IE9用 */
}

 

縦方向

文字の下に鏡を置いたときのように表示させます。

猫Press
猫Press 

猫Press
＜span class="rotateX180"＞猫Press＜/span＞

※「＜」「＞」は必ず半角に変えてくださいね。

/* X軸(水平方向の軸)を基準にして180度回転 */
.rotateX180 {
   display: inline-block;     /* インラインブロック化 */
   transform: rotateX( 180deg );
   -moz-transform:    rotateX( 180deg );  /* Firefox用 */
   -webkit-transform: rotateX( 180deg );  /* Chrome,Safari,新しいOpera用 */
   -o-transform:      rotateX( 180deg );  /* 古いOpera用 */
   -ms-transform:     rotateX( 180deg );  /* IE9用 */
}

 

 

縦横両方向

文字を180°回転させたときのように表示させます。

猫Press猫Press 

猫Press＜span class="rotateXY180"＞猫Press＜/span＞

※「＜」「＞」は必ず半角に変えてくださいね。

/* 180度回転 */
.rotateXY180 {
   display: inline-block;     /* インラインブロック化 */
   transform: rotate( 180deg );
   -moz-transform:    rotate( 180deg );  /* Firefox用 */
   -webkit-transform: rotate( 180deg );  /* Chrome,Safari,新しいOpera用 */
   -o-transform:      rotate( 180deg );  /* 古いOpera用 */
   -ms-transform:     rotate( 180deg );  /* IE9用 */
}

 

奥行方向

立体で回転させる方法ですが、2Dのrotateと同じ結果になります。

猫Press猫Press 

猫Press＜span class="rotateZ180"＞猫Press＜/span＞

※「＜」「＞」は必ず半角に変えてくださいね。

/* Z軸(奥行方向の軸)を基準にして180度回転 */
.rotateZ180 {
   display: inline-block;     /* インラインブロック化 */
   transform: rotateZ( 180deg );
   -moz-transform:    rotateZ( 180deg );  /* FirefoZ用 */
   -webkit-transform: rotateZ( 180deg );  /* Chrome,Safari,新しいOpera用 */
   -o-transform:      rotateZ( 180deg );  /* 古いOpera用 */
   -ms-transform:     rotateZ( 180deg );  /* IE9用 */
}

 

スポンサーリンク

カスタマイズしよう

「180」の数字を変えれば、いろんな角度で文字を表示させることができます。

例えば、60°に変えてみましょう。

 

横方向に60°

猫Press猫Press 

猫Press＜span class="rotateY60"＞猫Press＜/span＞

※「＜」「＞」は必ず半角に変えてくださいね。

/* Y軸(垂直方向の軸)を基準にして60度回転 */
.rotateY60 {
   display: inline-block;     /* インラインブロック化 */
   transform: rotateY( 60deg );
   -moz-transform:    rotateY( 60deg );  /* Firefox用 */
   -webkit-transform: rotateY( 60deg );  /* Chrome,Safari,新しいOpera用 */
   -o-transform:      rotateY( 60deg );  /* 古いOpera用 */
   -ms-transform:     rotateY( 60deg );  /* IE9用 */
}

 

縦方向に60°

猫Press
猫Press 

猫Press
＜span class="rotateX60"＞猫Press＜/span＞

※「＜」「＞」は必ず半角に変えてくださいね。

/* X軸(水平方向の軸)を基準にして60度回転 */
.rotateX60 {
   display: inline-block;     /* インラインブロック化 */
   transform: rotateX( 60deg );
   -moz-transform:    rotateX( 60deg );  /* Firefox用 */
   -webkit-transform: rotateX( 60deg );  /* Chrome,Safari,新しいOpera用 */
   -o-transform:      rotateX( 60deg );  /* 古いOpera用 */
   -ms-transform:     rotateX( 60deg );  /* IE9用 */
}

 

縦横両方向に60°

猫Press猫Press 

猫Press＜span class="rotateXY60"＞猫Press＜/span＞

※「＜」「＞」は必ず半角に変えてくださいね。

/* 60度回転 */
.rotateXY60 {
   display: inline-block;     /* インラインブロック化 */
   transform: rotate( 60deg );
   -moz-transform:    rotate( 60deg );  /* Firefox用 */
   -webkit-transform: rotate( 60deg );  /* Chrome,Safari,新しいOpera用 */
   -o-transform:      rotate( 60deg );  /* 古いOpera用 */
   -ms-transform:     rotate( 60deg );  /* IE9用 */
}

 

奥行方向に60°

立体で回転させる方法ですが、2Dのrotateと同じ結果になります。

猫Press猫Press 

猫Press＜span class="rotateZ60"＞猫Press＜/span＞

※「＜」「＞」は必ず半角に変えてくださいね。

/* Z軸(奥行方向の軸)を基準にして60度回転 */
.rotateZ60 {
   display: inline-block;     /* インラインブロック化 */
   transform: rotateZ( 60deg );
   -moz-transform:    rotateZ( 60deg );  /* FirefoZ用 */
   -webkit-transform: rotateZ( 60deg );  /* Chrome,Safari,新しいOpera用 */
   -o-transform:      rotateZ( 60deg );  /* 古いOpera用 */
   -ms-transform:     rotateZ( 60deg );  /* IE9用 */
}

 

スポンサーリンク

まとめ

いかがでしたか？

rotate関数(rotateZ関数)、rotateX関数、rotateY関数を使うことで、文字をいろいろな角度で表示させることができますね✨

 

 

スポンサーリンク

コメント

ホーム
トップ
タイトルとURLをコピーしました