<angle> CSS data type represents an angular dimension or an angle.
It consists of a
<number> followed by an angular unit (
turn). The number is immediately followed by the unit, i.e. no white space is allowed between them, and the length units are case-insensitive.
An angle is used to represent circular dimensions. Each angle value can be represented on the circle by a “slice” of that circle.
Angles can be positive or negative depending on the direction of rotation on the circle. In CSS, a circle is similar to a clock: if you move clockwise, the angles have positive values, and if you move counterclockwise the values are negative.
Many CSS properties take
<angle> values such as the CSS
transform property, where the angle value could determine the amount by which an element is rotated. For example,
transform: rotate(30deg). You can read more about transforming elements in the
Trivia & Notes
With four possible CSS angle units, it may occur to one’s mind that maybe some units are specific to certain properties, but they’re not. The units have nothing to do with the properties; any angle value that can be expressed in degrees, for example, can also be expressed in radians, gradians, or turns.
There is no restriction on which units can be used where. If a property accepts a value in
deg it also accepts a value in radians or turns.
degrepresents an angle in degrees. Degrees range from 0 to
360deg, with those two being equal. A full circle is
360deg, half a circle is
180deg, and half a circle in the counterclockwise direction is
-180deg. Angles represented in degrees can have any value between 0 and 360. For example:
gradrepresents an angle in gradians. Gradians range from 0 to
400grad, with those two being equal. A full circle is
400grad, half a circle is
200grad, and half a circle in the counterclockwise direction is
-200grad. Angles represented in gradians can have any value between 0 and 400. For example:
100grad(quarter of a circle),
radrepresents an angle in radians. Radians range from 0 to
2πrad, with those two being equal. An angle of 1 radian on a circumference of a circle creates an arc with an equal length to the radius of the circle. A full circle is
2πrad, half a circle is
πrad, and half a circle in the counterclockwise direction is
-πrad. Angles represented in radians can have any value between 0 and 2π.
One radian is approximately equal to 180/π degrees, or 57.2958 degrees. The general formula for converting from degrees to radians is to simply multiply the number of degree by π /180. The general formula for converting from radians to degrees to simply multiply the number by 180/(π).
Examples for using radian:
turnrepresents an angle in turns. Turns are new in CSS3, and a turn means a rotation. A full circle is 1 turn. One turn is equivalent to 360 degrees, and so
720degis equal to
2turn. Angles represented in turn can have any value between 0 and 1. For example:
-0.22turn. Note that
turnis singular, so even for more than 1 turn, you’d still write
The following image shows the position of some angles on a circle. Clockwise means positive and counterclockwise means negative.
The entire set of angle values is supported in Chrome, Firefox, IE9+, and Safari.
turn unit is new in CSS3 and is currently only supported in Firefox13+ and IE9+.