# CSS Units: Angles, Time and Frequency

In addition to linear measurements, CSS can also be used to measure angles, as well as changes over time:

## Angular Measurements

unitMeaning
`deg`degrees
`rad`radians
`grad`gradians
`turn`turns

Originally, all of these units (with the exception of `turn`) were associated with aural style sheets: styles designed to guide the pronunciation of words on web pages in cooperation with text-to-speech systems. Today, they are most strongly associated with CSS transforms.

• `deg`: self-explanatory. Positive degree values rotate an element “clockwise”; negative values go counter-clockwise:
``````@animation sway {
to { transform: rotate(15deg); }
}``````
• `rad`: the arc of a circle with the same length as the radius of that circle: essentially, the distance of the radius “wrapped” around the circle, creating a measurement equal to 57.295 degrees or 1⁄(2π). Widely used in mathematics, where it has considerable advantages in calculations.
• `grad`: equivalent to 9/10th of a degree. A complete circle is divided into 400grads, which makes right angle calculations easy: 90° is 100grad, 180° is 200grad, and so on.
• `turn`: probably the most instinctive angular measurement system after degrees: `1turn` is equal to 360°, `.25turn` is 90°, etc. Can be useful for CSS animation. Note that `turn` is always singular when used in CSS (`2turn`, etc).
``````@animation sway {
to { transform: rotate(.5turn); }
}``````

Note that angular measurements must always be defined by their unit (`transform: rotate(45)` won’t work) unless the value is 0.

## Time Measurements

Fairly straightforward: `s` is the familiar second, while `ms` is 1/1000th of a second. Seconds may also be provided as floating point numbers; no leading zero is required if the number of seconds is less than 1.

``#spinner { transition: .5s; }``

Which is equivalent to:

``#spinner { transition: 500ms; }``

Time values must always be positive.

## Frequency Measurements

Hertz (`hz`) and kilohertz (`khz`) are also supported in CSS; traditionally, they were used to suggest the pitch of a computer-generated voice when reading web page text. For reference, the range of human hearing is approximately 64Hz to 22,000Hz, from a very low bass to a high-pitched squeal, just under the ultrasonic. Hertz is also supported in the Web Audio API, although it is referenced in a different way.

That still doesn't cover all possible CSS measurements: there are also DPI (dots-per-inch) units, which I will address in a future article.

Photograph by Jenny Downing, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.