2016年08月19日

CSS3のtransform:rotateで要素を回転表示する方法

CSS3のプロパティについて解説する連載です。今回はtransformの中から、要素の回転をするtransform:rotateの使い方をご紹介します。

transform:rotateの指定方法

transform:rotateを指定するには、下記のように記述します。

transform: rotate();

transform: rotateの括弧内に記載した角度に従って、要素が回転表示されます。回転軸を指定したい時は、下のようにrotateX、rotateY、rotateZを使います。

transform: rotateX();
transform: rotateY();
transform: rotateZ();

また、併せてtransform: originを指定することで、回転時の原点（基準）を決めることも可能です。「水平方向の基準」と「垂直方向の基準」は両方とも、初期値はcenterです。

transform-origin: 水平方向の基準 垂直方向の基準;

それでは、transform:rotateの具体例について見ていきましょう。こちらの例では、下の画像を対象に変形（回転）を行っていきます。

rotateを使用して、先ほどの画像を回転させた例です。時計回りに15度（15deg）だけ回転させています。

transform: rotate(15deg);

transform-originを指定して、回転時の原点を指定した例です。上のtransform-originなしの場合と比較してみてください。

下の例では、水平方向をleft、垂直方向にcenterを指定しています。

transform: rotate(15deg);
transform-origin: left center;

ここからは、回転軸を指定した例について見ていきましょう。まずはrotateXから。X軸を回転軸として、要素を回転します。

transform: rotateX(60deg);

こちらはY軸で回転させた例です。

transform: rotateY(60deg);

最後はZ軸で回転させた例になります。

transform: rotateZ(60deg);

画像やテキストなどの要素を回転して表示できる、transform:rotateの使い方についてご紹介しました。他にも要素を変形できるプロパティはあるので、それらと組み合わせながら自在に要素を変形していきましょう。