Trigonometrische Funktionen in CSS

Sinus, Kosinus, Tangens und mehr in CSS berechnen.

Bramus

Trigonometrische Funktionen

In CSS ist es möglich, mathematische Ausdrücke zu schreiben. An der Basis befindet sich die calc()-Funktion für Berechnungen. Wahrscheinlich hast du auch schon von min(), max() und clamp() gehört.

Diese Funktionen verbinden sich mit den trigonometrischen Funktionen sin(), cos(), tan(), asin(), acos(), atan() und atan2(). Diese Funktionen werden in Modulebene 4 für CSS-Werte und -Einheiten definiert und sind in allen Browsern verfügbar.

sin(), cos() und tan()

Die drei Kernfunktionen sind:

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

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

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

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

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

Die arc- oder inverse Gegenstücke zu sin(), cos() und tan() sind asin(), acos() bzw. atan(). Diese Funktionen führen die Berechnung in entgegengesetzte Richtung durch: Sie nehmen einen numerischen Wert als Argument und geben den entsprechenden Winkel dafür 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 kreisförmigen Pfad um einen zentralen Punkt 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 Abstände auf der X- und Y-Achse werden mithilfe von cos() und sin() von --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, gibt es einen Abstand von 120deg (= 360deg / 3) zwischen den einzelnen Punkten.

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

Element drehen, sodass es seinem Ursprung gegenüberliegt

Mit der Funktion atan2() wird der relative Winkel von einem Punkt zum anderen berechnet. Für die Funktion werden zwei durch Kommas getrennte Werte als Parameter akzeptiert: die y- und x-Position des anderen Punkts in Relation zum ursprünglichen Punkt, der sich am Ursprung 0,0 befindet.

Mit dem berechneten Wert ist es möglich, Elemente mithilfe der Individual Transform Properties so zu drehen, dass sie einander gegenüberliegen.

Im folgenden Beispiel werden die Rechtecke so gedreht, dass sie zur Mausposition 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öbius-Streifen von Ana Tudor zu sehen ist, 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 bearbeiten.