mozilla

Revision 42194 of <angle>

  • Revision slug: CSS/angle
  • Revision title: angle
  • Revision id: 42194
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment no changes

Revision Content

Angle values in CSS have three possible units. All values in this example represent a right angle:

  • 90deg (degrees)
  • 100grad (grads)    One full circle (360deg) is 400grad
  • 1.571rad (radians)   One full circle (360deg) is 2π radians, 1rad is 180/π degrees
  • 1turn (turns) One full circle (360deg is 1turn)

Angle values may be negative. For example, -10deg and 350deg are equivalent. Values greater than 360deg are allowed.

Like for {{ Xref_csslength() }}, the unit may be omitted, if the value is zero: 0deg may be written as 0.

Browser compatibility

Browser Lowest version
Internet Explorer IE 9
Firefox (Gecko)  Firefox 3.6 (1.9.2) (no support for turn unit)
Opera --

Safari | Chrome | WebKit

4 | 2 | 528.17 (no support for turn unit)

Specifications

Specification Status Comment
CSS Values and Units Level 3 {{ Spec2('CSS3 Values') }}  

{{ languages( { "ja": "ja/CSS/angle" } ) }}

Revision Source

<p><strong>Angle</strong> values in CSS have three possible units. All values in this example represent a right angle:</p>
<ul> <li><code>90deg</code> (degrees)</li> <li><code>100grad</code> (grads)    One full circle (<code>360deg</code>) is <code>400grad</code></li> <li><code>1.571rad</code> (radians)   One full circle (<code>360deg</code>) is 2<em>π</em> radians, <code>1rad</code> is 180/<em>π</em> degrees</li> <li> <p><span style="font-family: 'Courier New'; ">1turn</span> (turns) One full circle (<span style="font-family: 'Courier New'; ">360deg</span> is <span style="font-family: 'Courier New'; ">1turn</span>)</p> </li>
</ul>
<p>Angle values may be negative. For example, -10deg and 350deg are equivalent. Values greater than 360deg are allowed.</p>
<p>Like for {{ Xref_csslength() }}, the unit may be omitted, if the value is zero: <code>0deg</code> may be written as <code>0</code>.</p>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> </tr> <tr> <td>Internet Explorer</td> <td>IE 9</td> </tr> <tr> <td>Firefox (Gecko)</td> <td> Firefox 3.6 (1.9.2) <span style="font-size: x-small; ">(no support for turn unit)</span></td> </tr> <tr> <td>Opera</td> <td>--</td> </tr> <tr> <td> <p>Safari | Chrome | WebKit</p> </td> <td> <p>4 | 2 | 528.17 <span style="font-size: x-small; ">(no support for turn unit)</span></p> </td> </tr> </tbody>
</table>
<div class="noinclude"> <h3 name="Specifications">Specifications</h3>
<table border="1" cellpadding="1" cellspacing="1" style="width: 1053px; border-style: solid; border-width: 1px; height: 75px; border-color: rgb(0,0,0);"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/css3-values/#angles" title="http://www.w3.org/TR/css3-values/#angles">CSS Values and Units Level 3</a></td> <td>{{ Spec2('CSS3 Values') }}</td> <td> </td> </tr> </tbody>
</table>
<p>{{ languages( { "ja": "ja/CSS/angle" } ) }}</p></div>
Revert to this revision