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

Web制作

2016年08月19日

CSS3プロパティの連載記事

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の具体例

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

サンプル画像

rotate

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

transform: rotate(15deg);

rotate

rotate(transform-originあり)

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

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

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

rotate(transform-originあり)

rotateX

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

transform: rotateX(60deg);

rotateX

rotateY

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

transform: rotateY(60deg);

rotateY

rotateZ

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

transform: rotateZ(60deg);

rotateZ

あとがき

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

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。