angle

概要

CSS<angle> データ型は角度を表します。正の角度は右回りの、負の角度は左回りの角度を表します。<数量> データ型の直後に単位(deg、grad、radturn)を続けます。他の CSS の寸法と同様に、単位と数値の間に空白を置きません。

静的なプロパティと単位では、1 つの角度を別の値で表すことができます: 90deg-270deg や、1turn4turn は最終的に同じ位置を表します。とは言え、動的なプロパティ、例えば transitiontransform プロパティに用いるような場合には、結果は変わるでしょう。

次の単位を使えます:

  • deg度)。一周は 360deg です。例: 0deg, 90deg, 360deg
  • gradグラード)。一周は 400grad です。例: 0grad, 100grad, 400grad
  • rad (ラジアン)。一周は 2π ラジアン、約 6.2832rad です。1rad は 180/π 度です。例: 0rad, 1.0708rad, 6.2832rad
  • turn (ターン)。角度が何周したのかを表します。一周は 1turn です。例: 0turn, 0.25turn, 1turn

仮に値 0 がどの単位の角度でも同じ値を表すのだとしても、これは <length> ではないため、単位を省略してはいけません。0 は無効で、0deg0grad0rad0turn を表しません。

訳注:主要ブラウザではFirefoxを含めて、単位のない 00degとみなしているような動作をし、以前の日本語版記事にもそのように書かれていました。はっきりしたことがわかれば再更新します。

Angle90.png

直角: 90deg = 100grad = 0.25turn 1.5708rad

Angle180.png 180度: 180deg = 200grad = 0.5turn 3.1416rad
AngleMinus90.png 直角(左向き) -90deg = -100grad = -0.25turn -1.5708rad
Angle0.png

ゼロ度: 0deg = 0grad = 0turn = 0rad

仕様

仕様書 策定状況 コメント
CSS Values and Units Module Level 3 勧告候補  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 2 (528.17) 3.6 (1.9.2) 9.0 no 4.0 (528.17)
turn 単位 no 13.0 9.0 no no
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? yes ? no ?
turn 単位 no 13.0 ? no no

添付ファイル

ファイル サイズ 日時 添付者:
Angle90.png
37932 バイト 2011-10-01 10:02:13 teoli
Angle180.png
38606 バイト 2011-10-01 10:08:01 teoli
AngleMinus90.png
38598 バイト 2011-10-01 10:26:20 teoli
Angle0.png
37266 バイト 2011-10-01 10:33:20 teoli
color-picker-gradient
66665 バイト 2013-07-26 06:25:46 gabriel_ivanica

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank, Marsf, FredB
最終更新者: ethertank,
サイドバーを隠す