<angle>

  • Revision slug: CSS/angle
  • Revision title: angle
  • Revision id: 42206
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 12 words added

Revision Content

The <angle> CSS data type represents angle values. Positive angles represent right angles, negative angles represent left angles. Its syntax is a {{ Xref_cssnumber() }} data type immediately followed by the unit (deg, grad, rad or turn). Like for any CSS dimension, there is no space between the unit literal and the number.

For static properties and a given unit, an angle can be represented by several values: 90deg and -270deg, or 1turn and 4turn represents the same final position. For dynamic properties, like applying a {{ cssxref("transition") }} on the {{ cssxref("transform") }} property, the effect will nevertheless be different.

The following units may be used:

  • deg which represents an angle in degrees. One full circle is 360deg. E.g. 0deg, 90deg, 360deg.
  • grad which represents an angle in gradians. One full circle is 400grad. E.g. 0grad, 100grad, 400grad.
  • rad which represents an angle in radians.  One full circle is 2π radians which approximates to 6.2832rad. 1rad is 180/π degrees. E.g. 0rad, 1.0708rad, 6.2832rad.
  • turn which represents the number of turns the angle is. One full circle is 1turn. E.g. 0turn, 0.25turn, 1turn.

As all units represents the same angle for the value 0, the unit may be omitted in that case: 0 represents 0deg, 0grad, 0rad, 0turn.

Examples

Angle90.png

A right angle: 90deg = 100grad = 1.0708rad = 0.25turn

   
   
   
   

Specifications

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

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2 (528.17) 3.6 (1.9.2) 9.0 no 4.0 (528.17)
turn unit no no 9.0 no no
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? yes ? no ?
turn unit no no ? no no

See also

 

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

Revision Source

<p>The <code>&lt;angle&gt;</code> <a href="/en/CSS" title="CSS">CSS</a> data type represents angle values. Positive angles represent right angles, negative angles represent left angles. Its syntax is a {{ Xref_cssnumber() }} data type immediately followed by the unit (<code>deg</code>, <code>grad</code>, <code>rad</code> or <code>turn</code>). Like for any CSS dimension, there is no space between the unit literal and the number.</p>
<p>For static properties and a given unit, an angle can be represented by several values: <code>90deg</code> and <code>-270deg</code>, or <code>1turn</code> and <code>4turn</code> represents the same final position. For dynamic properties, like applying a {{ cssxref("transition") }} on the {{ cssxref("transform") }} property, the effect will nevertheless be different.</p>
<p>The following units may be used:</p>
<ul> <li><code>deg</code> which represents an angle in <a class="external" href="http://en.wikipedia.org/wiki/Degree_%28angle%29" title="http://en.wikipedia.org/wiki/Degree_%28angle%29">degrees</a>. One full circle is <code>360deg</code>. E.g. <code>0deg</code>, <code>90deg</code>,<code> 360deg</code>.</li> <li><code>grad</code> which represents an angle in <a class="external" href="http://en.wikipedia.org/wiki/Gradian" title="http://en.wikipedia.org/wiki/Gradian">gradians</a>. One full circle is <code>400grad</code>. E.g. <code>0grad</code>, <code>100grad</code>,<code> 400grad</code>.</li> <li><code>rad</code> which represents an angle in <a class="external" href="http://en.wikipedia.org/wiki/Radian" title="http://en.wikipedia.org/wiki/Radian">radians</a>.  One full circle is 2π radians which approximates to <code>6.2832rad</code>. <code>1rad</code> is 180/π degrees. E.g. <code>0rad</code>, <code>1.0708rad</code>,<code> 6.2832rad</code>.</li> <li> <p><span style="font-family: 'Courier New'; ">turn</span> which represents the number of turns the angle is. One full circle is <span style="font-family: 'Courier New'; ">1turn</span>. E.g. <code>0turn</code>, <code>0.25turn</code>,<code> 1turn</code>.</p> </li>
</ul>
<p>As all units represents the same angle for the value 0, the unit may be omitted in that case: <code>0</code> represents <code>0deg</code>, <code>0grad</code>, <code>0rad</code>, <code>0turn</code>.</p>
<h2 name="Specifications">Examples</h2>
<table border="0" cellpadding="1" cellspacing="1" style="width: 100%;"> <tbody> <tr> <td><img alt="Angle90.png" class="internal default" src="/@api/deki/files/5704/=Angle90.png" style=""></td> <td> <p>A right angle: <code>90deg = 100grad = 1.0708rad = 0.25turn</code></p> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </tbody>
</table>
<h2 name="Specifications">Specifications</h2>
<table class="standard-table"> <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>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>2 (528.17)</td> <td>3.6 (1.9.2)</td> <td>9.0</td> <td>no</td> <td>4.0 (528.17)</td> </tr> <tr> <td><code>turn</code> unit</td> <td>no</td> <td>no</td> <td>9.0</td> <td>no</td> <td>no</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>?</td> <td>yes</td> <td>?</td> <td>no</td> <td>?</td> </tr> <tr> <td><code>turn</code> unit</td> <td>no</td> <td>no</td> <td>?</td> <td>no</td> <td>no</td> </tr> </tbody> </table>
</div>
<div class="noinclude"> <h2>See also</h2> <ul> <li><a href="/en/CSS_Reference" title="CSS Reference">CSS Reference</a> index</li> <li>CSS Data Types : {{ CSSDataTypes() }}</li> </ul> <p> </p> <p>{{ languages( { "ja": "ja/CSS/angle" } ) }}</p>
</div>
Revert to this revision