普通のブログでは文字を反転させることはあまりないと思いますが、
おしゃれのために文字に角度を付けたい！とか、
反転の説明をしたい！ということは0ではないですね。
今回、以下PowerPointに関する記事を作成していたときに、
反転の書き方を調べましたので、ご紹介したいと思います。
方法①サイトサービスを使う
文字を入力させるだけで、文字を反転させることができます。
rot180
このサイトでは、180°回した状態にすることができます。
ただし、日本語の場合は、180°回した状態にはならず、
鏡を横に置いたときのように反転させた状態になります。
結果をコピーして使うことができます。
Lunicode
このサイトでは、180°回した状態にすることができるほか、
鏡を横に置いたときのように反転させたり、
1文字ずつ丸〇で囲ったりさせることができます。
ただし、日本語の場合は、180°回した状態にはならず、
鏡を横に置いたときのように反転させた状態になります。
また、囲み文字は文字の横に〇が置かれるのみとなります。
結果をコピーして使うことも、
HTML用の特殊コードをコピー使うこともできます。
upside down
鏡
丸
囲み四角
方法②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関数を使うことで、文字をいろいろな角度で表示させることができますね✨
コメント