このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

角度

記事Feb. 1st,2021
CSSの<angle>値、角度について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

CSSの角度の単位

““<angle>”値”とは?

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

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

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

単位の一覧

単位 説明
degValues and Units Module Level 3 で追加 度数法の角度
gradValues and Units Module Level 3 で追加 グラードの角度
radValues and Units Module Level 3 で追加 弧度法の角度
turnValues and Units Module Level 3 で追加 回転数

角度の単位

degValues and Units Module Level 3 で追加

概要

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

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

サンプルコード

transform: rotate(90deg);

gradValues and Units Module Level 3 で追加

概要

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

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

サンプルコード

transform: rotate(100grad);

radValues and Units Module Level 3 で追加

概要

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

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

サンプルコード

transform: rotate(1.57rad);

turnValues and Units Module Level 3 で追加

概要

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

サンプルコード

transform: rotate(0.25turn);
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク