Gradians and Turns: the quiet heroes of CSS angles

Avatar of Geoff Graham
Geoff Graham on

I love coming across little overlooked CSS gems, like the gradien (grad) and turn (turn) units that Ken Bellows uncovers in his post explaining them. I don’t know, maybe y’all are already aware of them, but they’re certainly new to me.

They’re additional options for dealing with angles, where degrees (deg) and radians (rad) are more commonly known. I’m partial to degrees anytime I’m working with rotations. But now that I know there’s an easier way to express a half rotation by using 0.5turn instead of 180deg, I can see myself reaching for turns much more often.

When you’re designing an animation or thinking about how to add some rotation to your design, how are you thinking about it? You probably aren’t thinking in numbers. … You don’t usually think in degrees or radians. You think in terms of full turns and portions of turns. At least, I do.

After looking at his table of comparisons, I take the point:

Degrees Radians Gradians Turns My Fav Unit
30deg 0.52rad 33.33grad 0.08turn Gradians
45deg 0.79rad 50grad 0.13turn Gradians
60deg 1.04rad 66.67grad 0.17turn Gradians
90deg 1.57rad 100grad 0.25turn Turns
180deg 3.14rad 200grad 0.5turn Turns
360deg 6.28rad 400grad 1turn Turns
720deg 12.56rad 800grad 2turn Turns
1080deg 25.12rad 1200grad 3turn Turns

Hear, hear! And since these units are supported back to IE 9, seems like something fun to try out.

(Hat tip to Rachel Andrew for sharing this in her awesome CSS Layout News email.)

Direct Link →