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.25
0.25turn / 90deg / 0.5708rad
0.5
0.5turn / 180deg / 3.1416rad
-0.125
-0.125turn / -45deg / -0.7854rad
Even though I was unaware of this until yesterday, browser support is great3, even IE 9 supports it.
-
MDN. (2023-08-30). <angle> in CSS. ↩︎
-
Can I use. (2023-08-30). types: <angle>: turn ↩︎