Revision 42191 of <angle>

  • Revision slug: CSS/angle
  • Revision title: angle
  • Revision id: 42191
  • Created:
  • Creator: nimbupani
  • Is current revision? No
  • Comment 8 words removed

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)
Opera --

Safari | Chrome | WebKit

4 | 2 | 528.17

{{ 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>
<p> </p>
<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)</td> </tr> <tr> <td>Opera</td> <td>--</td> </tr> <tr> <td> <p>Safari | Chrome | WebKit</p> </td> <td> <p>4 | 2 | 528.17</p> </td> </tr> </tbody>
</table>
<div class="noinclude">
<p>{{ languages( { "ja": "ja/CSS/angle" } ) }}</p>
</div>
Revert to this revision