It’s #FrontendFriday – Trigonometrie jetzt auch in CSS

Dem ein oder anderen wird das Thema Trigonometrie noch ein dunkler Begriff sein, den er vermutlich zuletzt in der Schulzeit gehört hat. Sollte also jemandem gerade jetzt einfallen, dass er seine Trigonometrie Hausaufgaben vergessen hat, gibt es gute Nachrichten, denn er kann diese nun auch mit CSS umsetzen. Seit kurzem ist es möglich, die klassischen Trigonometrie Funktionen sin(), cos(), tan(), asin(), acos(), atan(), atan2() zu verwenden.

Was ist nochmal Trigonometrie?

Ganz kurz nochmal zusammengefasst, was das eigentlich ist: Trigonometrie ist ein Bereich der Mathematik, der sich mit den Beziehungen zwischen den Seiten und Winkeln von Dreiecken beschäftigt. In der Trigonometrie werden die trigonometrischen Funktionen Sinus, Kosinus und Tangens verwendet, um die Verhältnisse der Seitenlängen eines Dreiecks zu seinen Winkeln zu beschreiben.

Die grundlegenden trigonometrischen Funktionen sind:

1. Sinus (sin): Das Verhältnis der Länge der dem Winkel gegenüberliegenden Seite zur Länge der Hypotenuse (längste Seite) in einem rechtwinkligen Dreieck.

   

2. Kosinus (cos): Das Verhältnis der Länge der anliegenden Seite zur Länge der Hypotenuse in einem rechtwinkligen Dreieck.

   

3. Tangens (tan): Das Verhältnis der Länge der dem Winkel gegenüberliegenden Seite zur Länge der anliegenden Seite in einem rechtwinkligen Dreieck.

   

Das Anordnen von Elementen entlang eines Kreises

Es stimmt zwar, dass Dreiecke eine Rolle spielen, aber wir können komplexe Probleme geschickt in Teilaufgaben zerlegen und somit auch auf dem Gebiet der Kreispositionierung darauf zurückgreifen. Trigonometrie erweist sich als äußerst nützlich, wenn es darum geht, einen Punkt entlang eines Kreises zu platzieren. Durch die Verwendung von sin(), cos() und dem Radius des Kreises sowie des Winkels lässt sich ein Punkt beliebig auf einem Kreis positionieren.

Verwendung in CSS

So viel zur Trigonometrie-Theorie. Wie verwende ich die neuen Funktionen in CSS? Die Funktionen akzeptieren verschiedene Einheiten:

Winkel: deg, turn, rad
Normale Gleitkommazahlen und weitere Werte wie pi und e

Beispiel:

/* Single <angle> values */
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));
width: calc(100px * sin(1.0471967rad));

/* Single <number> values */
width: calc(100px * sin(63.673));
width: calc(100px * sin(2 * 0.125));

/* Other values */
width: calc(100px * sin(pi / 2));
width: calc(100px * sin(e / 4));

[2]

Praktisches Beispiel

Alles schön und gut, aber was kann man nun damit anfangen? Im WWW gibt es zahlreiche interessante Beispiele, die zeigen, was man mit dieser neuen Funktionalität alles Schönes umsetzen kann.

Der Nutzer Mads Stoumann hat mit den Trigonometrie-Funktionen eine animierte Uhr gebaut. JavaScript wird an dieser Stelle nur für die Zeitberechnung verwendet, jedoch nicht für die Animation.

See the Pen
CSS sin() and cos() Demo 4 by Mads Stoumann (@stoumann)
on CodePen.

[3]

Fazit

Mit reinem CSS ist es nun möglich, interessante Animationen umzusetzen, ohne überhaupt JavaScript einsetzen zu müssen.

Es gibt bestimmt noch viele weitere Anwendungsfälle, bei denen dieses Feature nützlich sein wird. Die Voraussetzung ist jedoch meistens das zugrundeliegende Trigonometrie-Wissen.

Quellen: