Home Writing Reading

til / rotate in CSS with turn

There are several ways1 to rotate items using CSS. The most common is using degrees (deg), to describe rotations from 0 to 360. Another option is radians (rad), which uses values from 0 to 2π. But, a more intuitive approach that doesn’t involve math terms is to use turns (turn)2.

0.25turn / 90deg / 0.5708rad
0.5turn / 180deg / 3.1416rad
-0.125turn / -45deg / -0.7854rad

Even though I was unaware of this until yesterday, browser support is great3, even IE 9 supports it.

  1. MDN. (2023-08-30). <angle> in CSS↩︎

  2. Wes Bos. (2023-08-29). Tweet↩︎

  3. Can I use. (2023-08-30). types: <angle>: turn ↩︎

  • Loading next post...
  • Loading previous post...