Trigonometrische Funktionen in CSS

Sinus, Kosinus, Tangente und mehr in CSS berechnen

Bramus

Trigonometrische Funktionen

In CSS können mathematische Ausdrücke geschrieben werden. Die Funktion calc() dient der Ausführung von Berechnungen. 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, also einen Wert zwischen -1 und 1.
• 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 „angrenzende“ (rote Linie) ist eine Linie vom Mittelpunkt des Kreises entlang der X-Achse. Ihre 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 atan2(), das zwei Argumente akzeptiert: A und B. Die Funktion gibt den Winkel zwischen der positiven X-Achse und dem Punkt (B,A) zurück.

Beispiele

Es gibt verschiedene Anwendungsfälle für diese Funktionen. 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 dann nach außen zu bewegen, wird jeder Punkt entlang der X- und Y-Achsen 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)
  ;
}

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

• Das erste untergeordnete Element von drei 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 Property 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.