Gradians and Turns: the quiet heroes of CSS angles

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 to Article — Permalink

The post Gradians and Turns: the quiet heroes of CSS angles appeared first on CSS-Tricks.

from CSS-Tricks http://bit.ly/2HsdmnF
via IFTTT