Ich liebe es, auf kleine, übersehene CSS-Juwelen zu stoßen, wie die Einheiten gradian (grad) und turn (turn), die Ken Bellows in seinem Beitrag zur Erklärung dieser aufdeckt. Ich weiß nicht, vielleicht seid ihr alle schon darauf aufmerksam geworden, aber für mich sind sie definitiv neu.
Sie sind zusätzliche Optionen für den Umgang mit Winkeln, bei denen Grad (deg) und Radiant (rad) bekannter sind. Ich bevorzuge Grad, wann immer ich mit Rotationen arbeite. Aber jetzt, da ich weiß, dass es eine einfachere Möglichkeit gibt, eine halbe Drehung auszudrücken, indem ich 0.5turn anstelle von 180deg verwende, kann ich mir vorstellen, Turns viel öfter zu verwenden.
Wenn Sie eine Animation entwerfen oder darüber nachdenken, wie Sie Ihrem Design eine Drehung hinzufügen können, wie denken Sie dann darüber nach? Sie denken wahrscheinlich nicht in Zahlen. ... Sie denken normalerweise nicht in Grad oder Radiant. Sie denken in vollen Umdrehungen und Bruchteilen von Umdrehungen. Zumindest ich.
Nachdem ich mir seine Vergleichstabelle angesehen habe, verstehe ich den Punkt
| Grad | Radiant | Gradians | Turns | Meine Lieblings-Einheit |
|---|---|---|---|---|
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 |
Hört, hört! Und da diese Einheiten bis IE 9 unterstützt werden, scheinen sie etwas Lustiges zum Ausprobieren zu sein.
(Ein Dankeschön an Rachel Andrew für das Teilen in ihrem großartigen CSS Layout News-E-Mail-Newsletter.)