Trigonometrische Funktionen in CSS

In CSS können Sie unter anderem Sinus, Kosinus und Tangente berechnen.

Bramus

Trigonometrische Funktionen

In CSS können mathematische Ausdrücke geschrieben werden. Die Funktion calc() dient der Berechnung. Sie haben aber wahrscheinlich auch schon von min(), max() und clamp() gehört.

Zu diesen Funktionen gehören die trigonometrischen Funktionen sin(), cos(), tan(), asin(), acos(), atan() und atan2(). Diese Funktionen sind im Modul „CSS-Werte und ‑Einheiten – Level 4“ definiert und in allen Browsern verfügbar.

sin(), cos() und tan()

Die drei wichtigsten trigonometrischen Funktionen sind:

• cos(): Gibt den Kosinus eines Winkels zurück, ein Wert zwischen -1 und 1.
• sin(): Gibt den Sinus eines Winkels zurück, der ein Wert zwischen -1 und 1 ist.
• tan(): Gibt den Tangens eines Winkels zurück, also einen Wert zwischen −∞ und +∞.

Im Gegensatz zu ihren JavaScript-Entsprechungen akzeptieren diese Funktionen sowohl Winkel als auch Radiane als Argument.

In der folgenden Demo werden diese Funktionen verwendet, um die Linien zu zeichnen, aus denen das Dreieck um den Satz --angle besteht:

• Die Hypotenuse (gelbe Linie) ist eine Linie von der Mitte des Kreises zur Position des Punktes. Seine Länge entspricht dem --radius des Kreises.
• Die nebenstehende (rote Linie) ist eine Linie von der Mitte des Kreises entlang der X-Achse. Seine Länge ist gleich der --radius multipliziert mit dem Kosinus der --angle.
• Die „Gegenseite“ (blaue Linie) ist eine Linie von der Mitte des Punkts entlang der Y-Achse. Seine Länge ist gleich der --radius multipliziert mit dem Sinus der --angle.
• Mit der Funktion tan() des --angle wird die grüne Linie vom Punkt zur X-Achse gezeichnet.

asin(), acos(), atan() und atan2()

Die Arkus- oder Inversen von sin(), cos() und tan() sind asin(), acos() und atan(). Diese Funktionen führen die Berechnung in umgekehrter Richtung durch: Sie nehmen einen numerischen Wert als Argument und geben den entsprechenden Winkel zurück.

Schließlich gibt es noch atan2(), das die beiden Argumente A und B annimmt. Die Funktion gibt den Winkel zwischen der positiven X-Achse und dem Punkt (B,A) zurück.

Beispiele

Für diese Funktionen gibt es verschiedene Anwendungsfälle. Im Folgenden finden Sie eine kleine Auswahl.

Elemente auf einem Kreis um einen Mittelpunkt herum verschieben

In der folgenden Demo drehen sich die Punkte um einen zentralen Punkt. Anstatt jeden Punkt um seinen eigenen Mittelpunkt zu drehen und ihn dann nach außen zu bewegen, wird jeder Punkt auf der X- und Y-Achse verschoben. Die Entfernungen auf der X- und Y-Achse werden durch Berücksichtigung der cos() bzw. der sin() der --angle bestimmt.

:root {
  --radius: 20vmin;
}

.dot {
  --angle: 30deg;
  translate: /* Translation on X-axis */
             calc(cos(var(--angle)) * var(--radius))

             /* Translation on Y-axis */
             calc(sin(var(--angle)) * var(--radius) * -1)
  ;
}

Um die Punkte gleichmäßig um den Mittelpunkt herum zu verteilen, erhält jeder Punkt einen zusätzlichen Versatz auf Grundlage seines nth-child-Index. Wenn es beispielsweise drei Punkte gibt, beträgt der Abstand zwischen den einzelnen Punkten 120deg (= 360deg / 3).

• Das erste von drei untergeordneten Elementen wird um 0 x 120deg = 0deg verschoben.
• Das zweite untergeordnete Element von drei wird um 1 x 120deg = 120deg verschoben.
• Das dritte untergeordnete Element von drei wird um 2 x 120deg = 240deg verschoben.

Element so drehen, dass es zum Ursprung zeigt

Mit der atan2()-Funktion wird der relative Winkel von einem Punkt zu einem anderen berechnet. Die Funktion akzeptiert zwei kommagetrennte Werte als Parameter: die y- und x-Position des anderen Punkts relativ zum Ursprungspunkt, der sich am Ursprung 0,0 befindet.

Mit dem berechneten Wert können Sie Elemente mithilfe der einzelnen Transformationseigenschaften so drehen, dass sie sich gegenüberstehen.

Im folgenden Beispiel sind die Felder so gedreht, dass sie zum Mauszeiger zeigen. Die Mausposition wird über JavaScript mit einer benutzerdefinierten Eigenschaft synchronisiert.

div.box {
  --my-x: 200;
  --my-y: 300;

  /* Position the box inside its parent */
  position: absolute;
  width: 50px;
  aspect-ratio: 1;
  translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);

  /* Rotate so that the box faces the mouse position */
  /* For this, take the box its own position and size (25 = half the width) into account */
  rotate: atan2(
            calc((var(--mouse-x) - var(--my-x) - 25) * 1),
            calc((var(--mouse-y) - var(--my-y) - 25) * -1)
          );
}

Community-Highlight

Wie in diesem animierten Möbiusband von Ana Tudor gezeigt, können cos() und sin() nicht nur für Übersetzungen verwendet werden. Hier wird das Ergebnis verwendet, um die Komponenten s und l der Farbfunktion hsl() zu manipulieren.