CSSのtransformプロパティなら、文字や画像を丸ごと回転できる

ウェブ上の文字を90度回転させたければ、画像化して加工するくらいしか方法がないと思われるかもしれません。また、画像を45度だけ回転させたり、上下や左右をひっくり返したりしたければ、やはり画像そのものを加工するしか方法がないと思われるかもしれません。しかし、どちらの場合も画像加工は不要です。文字も画像も、CSSだけで回転させられるからです。

何でも自由な角度で回転可能なのが、CSSのtransformプロパティ
CSSのtransformプロパティは、様々な効果を実現する特別な値(変形関数)を指定することで、任意の要素を自在に変形させられるプロパティです。transformプロパティの値に「rotate」を使って角度を指定すれば、下図のように30度でも45度でも90度でも、自由な角度で文字や画像などを丸ごと回転させられます。
 
画像も文字も(要素を丸ごと)自由な角度で回転させられる

画像でも文字でも、要素を丸ごと自由な角度で回転させられるのが、CSSのtransformプロパティ


基準点を指定して3D回転も可能
このtransformプロパティは、机の上で紙を回転させるような2D(平面)での回転だけではなく、X軸・Y軸・Z軸を基準にした3D(立体)での回転もできます。例えば、Y軸を基準に180度回転させれば、下図左上のように鏡文字も作れます。本文の表示に使うことはあまりないでしょうが、ウインドウ端に表示するデザインなどに活用するとおもしろいかもしれません。
 
X軸・Y軸を基準にして鏡のように回転させることもできる

CSSのtransformプロパティで、X軸やY軸を基準にして鏡のように回転させた場合の表示例


90度回転させてウインドウの端を有効利用するデザインなどに
便利な活用例の1つとして、下図のように横方向に並んでいる文字列をそのまま90度回転させて、ウインドウ端に寄せておくようなデザインがあります。どのように回転させてもテキストはテキストですから、範囲選択してコピーすることもできますし、検索対象にもなりますし、もちろんリンクもそのまま機能します。
 
ページの端に90度回転させて文字を表示したいときも、画像化する必要はない。

ページの端に90度回転させた文字やリンクを表示したい際にも画像化する必要はなく、transformプロパティに値rotateを指定するだけで済む


文字単位や画像単位ではなく特定の要素を丸ごと回転させられるため、「画像や文字やその他の装飾をすべて含んだボックス」の全体を任意の角度でぐるりと回転させられます。いちいち画像化して加工するような手間をかける必要がないため、楽にデザインの幅を広げられるでしょう。

今回は、CSSのtransformプロパティを使って、任意の要素を自由な角度で回転させる方法を解説いたします。

【本記事の目次】

 

CSSのtransformプロパティを使って自由な角度で回転させる書き方

CSSを使って文字や画像を丸ごと回転させる方法はとても簡単です。transformプロパティの値に、rotate、rotateX、rotateY、rotateZなどの回転方法を示すキーワード(変形関数名)を使って望みの角度を指定するだけです。例えば以下のように記述します。
transform: rotate( 角度 );  /* 2D(平面)で回転 */
transform: rotateX( 角度 ); /* 3DのX軸(水平)で回転 */
transform: rotateY( 角度 ); /* 3DのY軸(垂直)で回転 */
transform: rotateZ( 角度 ); /* 3DのZ軸(奥行)で回転 */
上記で「角度」と記した部分には、CSSで角度を表す単位「deg」を使った数値を記述します。例えば「90deg」なら90度を示します。マイナス記号を使って負の値を指定することもできます。例えば「45deg」だと時計回りに45度、「-45deg」だと反時計回りに45度になります。

具体的なCSSソースの書き方を解説するためのサンプルHTML
それぞれの回転方法について具体的なCSSソースの書き方をご紹介する前に、説明用のHTMLソースを掲載しておきます。
<p class="samplebox">
   <img src="rabbit.gif" alt="うさぎ">
   テキストや画像などを含んだ要素を
   <a href="#link">自由な角度で</a>回転させられます。
</p>
p要素で作るボックス内に、画像と文章とテキストリンクが含まれています。このボックス全体に対してCSSでtransformプロパティを適用させるため、p要素に「samplebox」というclass名を付加しています。

 

2D(平面)回転させるtransform:rotateの書き方

先程のHTMLソースを2Dで回転させるには、例えば以下のようにCSSソースを記述します。
.samplebox {
   transform: rotate( -45deg );
}
上記の場合は、要素全体が2Dで反時計回りに45度回転するため、下図のように左側へ斜めに倒されたような表示になります。
 
▲transform: rotate(-45deg);

▲transform: rotate(-45deg); ※反時計回りに45度ほど2D回転


上記の例では角度に「-45deg」と負の値を指定しましたから、反時計回りに45度ほど回転します。360度で一回転するわけですから、正の値で「315deg」と指定しても同じ表示になります。


 

X軸で3D回転させるtransform:rotateXの書き方

X軸を基準にした3D(立体)で回転させるには、例えば以下のようにCSSソースを記述します。
.samplebox {
   transform: rotateX( 180deg );
}
上記の場合は、X軸(水平方向の軸)を基準にして180度回転するため、下図のように上下をひっくり返した表示になります。
 
▲transform: rotateX(180deg);

▲transform: rotateX(180deg); ※X軸を基準にして180度3D回転


この状態でも、テキスト部分をドラッグすれば範囲選択してコピーできますし、リンク部分はクリックもできます。


 

Y軸で3D回転させるtransform:rotateYの書き方

Y軸を基準にした3D(立体)で回転させるには、例えば以下のようにCSSソースを記述します。
.samplebox {
   transform: rotateY( 180deg );
}
上記の場合は、Y軸(垂直方向の軸)を基準にして180度回転するため、下図のように左右がひっくり返った鏡文字のような表示になります。
 
▲transform: rotateY(180deg);

▲transform: rotateY(180deg); ※Y軸を基準にして180度3D回転


※X軸やY軸を基準にして回転させる際は、角度に90度(90deg)を指定すると何も見えなくなりますので注意して下さい。机の上に垂直に立てている紙を真正面から見ているとき、その紙を奥に90度倒すと紙の縁しか見えなくなります。よほど紙が薄ければ、ほぼ何も見えないでしょう。それが「X軸を基準に90度回転させた状態」です。


 

Z軸で3D回転させるtransform:rotateZの書き方

Z軸を基準にした3D(立体)で回転させるには、例えば以下のようにCSSソースを記述します。
.samplebox {
   transform: rotateZ( 60deg );
}
上記の場合は、Z軸(奥行き方向の軸)を基準にして60度回転するため、下図のように時計回りに60度回転した表示になります。
 
▲transform: rotateZ(60deg);

▲transform: rotateZ(60deg); ※Z軸を基準にして60度3D回転


※Z軸を基準に3D回転させた際の描画は、2Dで回転させた場合と同じです。


 

transformプロパティを使って回転させる際の、占有空間に関する注意点

transformプロパティを使って回転させる場合は、どの方向に回転させても他の要素の表示位置には一切影響しない点に注意が必要です。例えば下図のように90度回転させても、周囲の要素が避けて表示されることはありません。中央を基準にして180度回転させる場合や、周囲にほとんど影響がないくらい浅い角度で回転させる場合以外は、回転後に表示される空間をあらかじめ確保しておく必要があります。
 
回転する前の空間はそのまま占有され続ける

回転する前の空間はそのまま占有され続ける


※上図は、回転対象の要素を「左下を基準点にして回転」させた場合の表示例です。回転の基準座標を指定する方法は次のページでご紹介しています。

回転させた要素をページの端に表示したい場合など、余計な空間が残らないようにするには、例えば以下のようにCSSを追記しておく方法があります。
position: absolute;
top: 100px;
right: 3px;
positionプロパティに値「absolute」を指定することで絶対配置にすれば、他の要素の表示に影響しなくなります。そのため、どのように回転させても余計な空間は残りません。

 

CSSで回転させる際のオプションや注意点など

さて、CSSのtransformプロパティを使って回転させる基本は上記の通りです。とても簡単に、様々な角度で回転させられることがお分かり頂けたでしょう。最後に、回転する基準点を指定する方法や、インライン要素を回転させたい場合の注意点、古いブラウザへの対処方法など、CSSで任意の要素を回転させる補足情報をご紹介いたします。