CSSで使用できる角度の単位
公開:
更新:
transform
の関数などで使われる、CSSで使用できる角度の単位についてのメモです。
CSS Values and Units Module Level 3 - 6.1. Angles: the ‘<angle>’ type and ‘deg’, ‘grad’, ‘rad’, ‘turn’ units degree、度数法。 グラード。ゴン(gon)、グレード(grade)、グラディアン(gradian)とも。 ラジアン(radian)。弧度法。 1回転を1つの単位として扱う。 おまけ。コンバータ作ってみた。単位
deg
360で円を一周するお馴染みの表し方。grad
1直角を100とする単位。
つまり90deg
の1/100が1grad
になる。360deg
は400grad
で表すことができる。rad
円周上でその円の半径と同じ長さの弧を切り取る2本の半径が成す角の値
だそうです。360deg
は2πrad
で表すことができる。
degreeからの変換はdegree * π / 180
で行う。turn
1turn
は360deg
と等しい。まとめ
1deg = 約1.1111111111grad = 約0.0174532925rad = 約0.0027777778turn
90deg = 100grad = 約1.57079632679rad = 0.25turn
180deg = 200grad = 約3.1415926536rad = 0.5turn
360deg = 400grad = 約6.2831853072rad = 1turn