文字や画像など、ウェブ上に存在する要素を丸ごと回転できる

従来、ウェブ上で文字を90度回転させようと思えば、画像化して加工するくらいしか方法がありませんでした。また、画像を回転させたり左右や上下を逆にしたりするには、やはり画像そのものを加工する必要がありました。

しかし、CSS3のtransformプロパティに値「rotate」を使って角度を指定すると、30度でも45度でも90度でも、自由な角度で文字や画像などを丸ごと回転させられます。

画像も文字も(要素を丸ごと)自由な角度で回転させられる

画像も文字も(要素を丸ごと)自由な角度で回転させられる


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

X軸・Y軸を基準にして鏡のように回転させることもできる

X軸・Y軸を基準にして鏡のように回転させることもできる


90度回転させてウインドウの端を有効利用するデザインなどに
このtransformプロパティに値「rotate」を指定する方法を活用すれば、横方向に並ぶ文字列をそのまま90度回転させてウインドウ端に寄せるようなデザインも、画像化することなく簡単に作れます。どのように回転させてもテキストはテキストですから、範囲選択してコピーもできますし、検索対象にもなりますし、もちろんリンクもそのまま機能します。

ページの端に90度回転させて文字を表示したいときも、画像化する必要はない。

ページの端に90度回転させて文字を表示したいときも、画像化する必要はない。


文字単位や画像単位ではなく特定の要素を丸ごと一括して回転できるため、「画像や文字やその他の装飾をすべて含んだボックス」の全体を任意の角度でぐるりと回転でき、デザインの幅が広がります。

CSS3の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ソースを記述します。

2D回転:
transform: rotate( -45deg );
上記の場合は、要素全体が2D(平面)で反時計回りに45度回転するため、下図のように左側へ斜めに倒されたような表示になります。

▲transform: rotate(-45deg);

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


ここでtransformプロパティに指定した値「rotate」は、2D(平面)で回転させる指示です。上記の例では角度に「-45deg」と負の値を指定しましたから反時計回りに回転します。「315deg」と指定しても全く同じ表示になります。


 
X軸で3D回転:
transform: rotateX( 180deg );
上記の場合は、X軸(水平方向の軸)を基準にして180度回転するため、下図のように「上下にひっくり返した表示」になります。

▲transform: rotateX(180deg);

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


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


 
Y軸で3D回転:
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( 60deg );
上記の場合は、Z軸を基準にして60度回転するため、下図のように時計回りに60度回転した表示になります。

▲transform: rotateZ(60deg);

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


Z軸は奥行き方向の軸です。その軸を基準に回転させると、2Dで回転させた場合と同じように見えます。


 
さて、CSSのtransformプロパティに値「rotate」などを使う方法は、上記のようにとても簡単です。しかし、実際に活用する上ではいくつかの注意点があります。詳しくは、次のページでご紹介いたします