The <angle> CSS data type represents an angular dimension or an angle.
It consists of a <number> followed by an angular unit (deg, rad, grad, 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 transform entry.
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.
Values
deg-
degrepresents an angle in degrees. Degrees range from 0 to360deg, with those two being equal. A full circle is360deg, half a circle is180deg, and half a circle in the counterclockwise direction is-180deg. Angles represented in degrees can have any value between 0 and 360. For example:30deg,45deg,-135deg. grad-
gradrepresents an angle in gradians. Gradians range from 0 to400grad, with those two being equal. A full circle is400grad, half a circle is200grad, 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),150grad,-300grad. rad-
radrepresents an angle in radians. Radians range from 0 to2π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 is2π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:
0rad,2.3309rad,5.93505rad. turn-
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 so720degis equal to2turn. Angles represented in turn can have any value between 0 and 1. For example:0.3turn,0.95turn,-0.22turn. Note thatturnis singular, so even for more than 1 turn, you’d still write2turnand not2turns.
Examples
The following image shows the position of some angles on a circle. Clockwise means positive and counterclockwise means negative.
Browser Support
The entire set of angle values is supported in Chrome, Firefox, IE9+, and Safari.
The turn unit is new in CSS3 and is currently only supported in Firefox13+ and IE9+.
