Unformed Building

CSSで使用できる角度の単位

公開:
更新:

パーマリンク

transformの関数などで使われる、CSSで使用できる角度の単位についてのメモです。

CSS Values and Units Module Level 3 - 6.1. Angles: the ‘<angle>’ type and ‘deg’, ‘grad’, ‘rad’, ‘turn’ units

単位

deg

degree、度数法
360で円を一周するお馴染みの表し方。

grad

グラード。ゴン(gon)、グレード(grade)、グラディアン(gradian)とも。
1直角を100とする単位。
つまり90deg1/1001gradになる。360deg400gradで表すことができる。

rad

ラジアン(radian)。弧度法。
円周上でその円の半径と同じ長さの弧を切り取る2本の半径が成す角の値だそうです。
360deg2πradで表すことができる。
degreeからの変換はdegree * π / 180で行う。

2011年9月6日版でWho is going to use this anyway?とか言われてた単位。

turn

1回転を1つの単位として扱う。
1turn360degと等しい。

まとめ

1deg = 約1.1111111111grad = 約0.0174532925rad = 約0.0027777778turn
90deg = 100grad = 約1.57079632679rad = 0.25turn
180deg = 200grad = 約3.1415926536rad = 0.5turn
360deg = 400grad = 約6.2831853072rad = 1turn

おまけ。コンバータ作ってみた。

CSS Angle Units Converter