“<angle>”値~角度

““<angle>”値”とは？

“<angle>”値は角度を表します。“transform”プロパティで要素を回転させたり、“linear-gradient()”関数でグラデーションの角度を指定するために使用できます。

“<angle>”値は“<dimension>”値の一つで、実数(“<number>”値)とそれに続く単位で表されます。“0”の場合でも単位が必要です。

“+”もしくは“-”を付けた正負の表記が可能です。正の数は時計回り、負の数は反時計回りの角度を表します。

“<angle>”値が使用できる場所では“calc()”関数などを用いた数学的表現が使用できます。

単位の一覧

仕様書

定義されている仕様書

deg
grad
rad
turn

“deg”

概要

“deg”は度数法の角度を表します。1回転は“360°”です。

度数法の単位記号の“°”を“deg”に置き換えて記述します。90°は“90deg”、360°は“90deg”として記述します。

サンプルコード

transform: rotate(90deg);

“grad”

概要

“grad”はグラードによる角度を表します。“1^g”は直角の100分の1と定義され、1回転(360°)は“400^g”、1°は“0.9^g”です。

単位記号の“^g”を“grad”に置き換えて記述します。100^gは“100grad”、400^gは“400grad”として記述します。

サンプルコード

transform: rotate(100grad);

“rad”

概要

“rad”は弧度法(ラジアン)による角度を表します。1回転(360°)は“2πrad(≒6.283rad)”、1°は“π/180rad(≒0.017rad)”です。

90°はおよそ“1.57rad”、360°はおよそ“6.283rad”として記述できます。

サンプルコード

transform: rotate(1.57rad);

“turn”

概要

“turn”は回転数によって表す角度です。1回転(360°)は“1turn”、1°はおよそ“0.0027turn”です。

サンプルコード

transform: rotate(0.25turn);