ywork2020.com

Title

要素を回転させる

目次 (INDEX)

rotateとは

rotate とは次の語句からなるCSSの関数です。
rotate
読み: ローテート、ローテイト
意味: 回転

目次に戻る

rotate関数の概要

この関数は、ブロックレベル要素を二次元平面上の特定の点を中心として回転させます。

rotate関数はCSSのtransformプロパティに属する関数です。 指定する値は角度で指定します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この関数の記述は以下のような書き方になります。

セレクター{transform: rotate(アングル値);}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

この関数はブロックレベル要素の二次元平面上の回転を行います。 サンプルは親要素のdiv要素に子要素としてp要素を内包しています。この内包されたp要素に関数を適用していきます。

初期値: 0

p sample

p{transform: rotate(0);}

目次に戻る

数値: アングル値で任意の回転角度を指定する

角度を指定する場合には数値+単位の記法で記述します。 角度を表す単位には、度数法で表すdeg「度(°)」や、弧度法で表すradが使用されます。 deg はdegreeを省略したもので「度」という意味です。 また、 rad はradianを省略したもので「ラジアン」の意味です。

一般的にはdegを使った方が理解しやすいと思いますが、補足として書いておくと、 1deg = 0.017453rad となり、57.3degで1radとなります。

その他の単位でturnという扱いやすい単位もあり、この単位は1turnが360度を意味します。 つまり、0.5turn=180度であり、0.25turn=90度となります。

degrad
10.017453
20.034907
30.052360

p sample
45deg

p sample
-45deg

p sample
380deg

p sample
1rad

p{transform: rotate(45deg);}

アングル値は負の数も指定することができます。これは要素が反時計回りに回転します。 また、上限値を超えた場合には周回値で計算されます。

目次に戻る

備考: 回転の原点を調整する

補足ではありますが、回転の軸になる原点を設定する場合には、 transform-originプロパティを使用します。 transform-originプロパティの初期値は「50% 50% 0」です。 これは要素の中心が原点であるということなのですが、ここでは詳細は割愛させていただきます。

このサンプルでは回転の原点を要素の右下の角に移動させています。 つまり、回転の原点は要素の横軸100%の位置(右端)と縦軸の100%の位置(下端)だと指定しています。

p sample
10deg
transform-origin: 50% 50%

p sample
10deg
transform-origin: 100% 100%

p{
	transform-origin: 100% 100%;
	transform: rotate(10deg);
}

目次に戻る

補足説明

  • ブロックレベル要素に適用可能

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

transform: rotate(0);

transform: rotate(45deg);

transform: rotate(-45deg);

transform: rotate(1rad);

transform: rotate(-1rad);

transform: rotate(0.25turn);

transform: rotate(-0.25turn);

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る