Revision 953617 of <angle>

<p>{{ CSSRef() }}</p>

<h2 id="Summary">Summary</h2>

<p>The <code>&lt;angle&gt;</code> <a href="/en-US/docs/Web/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><a id="deg">deg</a></code> which represents an angle in <a class="external" href="https://en.wikipedia.org/wiki/Degree_%28angle%29" title="https://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><a id="grad">grad</a></code> which represents an angle in <a class="external" href="https://en.wikipedia.org/wiki/Gradian" title="https://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><a id="rad">rad</a></code> which represents an angle in <a class="external" href="https://en.wikipedia.org/wiki/Radian" title="https://en.wikipedia.org/wiki/Radian">radians</a>.&nbsp; 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><code><a id="turn">turn</a></code> which represents the number of turns the angle is. One full circle is <code>1turn</code>. E.g. <code>0turn</code>, <code>0.25turn</code>,<code> 1turn</code>.</li>
</ul>

<p>Even if all units represent the same time for the value <code>0</code>, the unit may not be omitted in that case as it isn't a {{ xref_csslength() }}: <code>0</code> is invalid and does not represent <code>0deg</code>, <code>0grad</code>, <code>0rad</code> or <code>0turn</code>.</p>

<h2 id="Specifications" name="Specifications">Examples</h2>

<table border="0" cellpadding="1" cellspacing="1" style="width:100%">
 <tbody>
  <tr>
   <td><img alt="Angle90.png" class="default internal" src="/@api/deki/files/5704/=Angle90.png" /></td>
   <td>
    <p>A right angle: <code>90deg = 100grad = 0.25turn</code> <code style="white-space: nowrap;">≈</code><code> 1.5708rad</code></p>
   </td>
  </tr>
  <tr>
   <td><img alt="Angle180.png" class="default internal" src="/@api/deki/files/5706/=Angle180.png" /></td>
   <td>A flat angle: <code>180deg = 200grad = 0.5turn</code><code> </code><code style="white-space: nowrap;">≈</code><code> 3.1416rad</code></td>
  </tr>
  <tr>
   <td><img alt="AngleMinus90.png" class="default internal" src="/@api/deki/files/5707/=AngleMinus90.png" /></td>
   <td>A right angle (towards the left): <code>-90deg = -100grad = -0.25turn</code> <code style="white-space: nowrap;">≈</code><code> -1.5708rad</code></td>
  </tr>
  <tr>
   <td><img alt="Angle0.png" class="default internal" src="/@api/deki/files/5708/=Angle0.png" /></td>
   <td>
    <p>A null angle: <code>0deg = 0grad = 0turn</code><code> </code><code style="white-space: nowrap;">=</code><code> 0rad</code></p>

    <div class="note"><strong>Note:</strong> <code>0</code> is not a valid angle value.</div>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Specifications" name="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Values', '#angles', '&lt;angle&gt;') }}</td>
   <td>{{ Spec2('CSS3 Values') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">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>{{ CompatNo }}</td>
   <td>4.0 (528.17)</td>
  </tr>
  <tr>
   <td><code>turn</code> unit</td>
   <td>{{ CompatNo }}</td>
   <td>13.0</td>
   <td>9.0</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</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&nbsp;Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown }}</td>
   <td>{{ CompatVersionUnknown }}</td>
   <td>{{ CompatUnknown }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatUnknown }}</td>
  </tr>
  <tr>
   <td><code>turn</code> unit</td>
   <td>{{ CompatNo }}</td>
   <td>13.0</td>
   <td>{{ CompatUnknown }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
  </tr>
 </tbody>
</table>
</div>