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

Angular Measurements

unit	Meaning
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/10^th 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/1000^th 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.