Trigonometrische Funktionen in CSS

Berechnen Sie in CSS den Sinus, Kosinus, Tangens und mehr.

Bramus

Trigonometrische Funktionen

In CSS ist es möglich, mathematische Ausdrücke zu schreiben. Unten befindet sich die calc()-Funktion für Berechnungen. Höchstwahrscheinlich haben Sie auch von min(), max() und clamp() gehört.

Diese Funktionen werden durch die trigonometrischen Funktionen sin(), cos(), tan(), asin(), acos(), atan() und atan2() verbunden. Diese Funktionen sind im Modul „CSS Values and Units“ – Modulebene 4 definiert und sind in allen Browsern verfügbar.

Unterstützte Browser

  • 111
  • 111
  • 108
  • 15,4

Quelle

sin(), cos() und tan()

Die drei wichtigsten Trig-Funktionen 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-Gegenstücken akzeptieren diese Funktionen sowohl Winkel als auch Radianten als Argument.

In der folgenden Demo werden mit diesen Funktionen die Linien gezeichnet, aus denen das Dreieck um das Set --angle besteht:

  • Die „Hypotenuse“ (gelbe Linie) ist eine Linie, die vom Mittelpunkt des Kreises bis zur Position des Punkts verläuft. Seine Länge entspricht der --radius des Kreises.
  • Die „nebeneinander“ (rote Linie) ist eine Linie vom Mittelpunkt des Kreises entlang der X-Achse. Die Länge entspricht dem --radius multipliziert mit dem Kosinus von --angle.
  • Die „Gegenüber“ (blaue Linie) ist eine Linie, die vom Mittelpunkt des Punkts entlang der Y-Achse ausgeht. Seine Länge entspricht dem --radius multipliziert mit dem Sinus von --angle.
  • Die tan()-Funktion von --angle wird verwendet, um die grüne Linie vom Punkt zur X-Achse zu zeichnen.

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

Das arc- oder inverse Gegenstück von sin(), cos() und tan() sind asin(), acos() bzw. atan(). Diese Funktionen führen die Berechnung in entgegengesetzter 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 akzeptiert. 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 kreisförmigen Pfad um einen Mittelpunkt 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 verschieben, wird jeder Punkt auf der X- und der Y-Achse übersetzt. Die Abstände auf der X- und der Y-Achse werden unter Berücksichtigung von cos() bzw. sin() des --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 herum verteilt werden, erhält jeder Punkt einen zusätzlichen Versatz, der auf seinem nth-child-Index basiert. Wenn es beispielsweise drei Punkte gibt, ist ein Abstand von 120deg (= 360deg / 3) zwischen den einzelnen Punkten vorhanden.

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

Element so drehen, dass es zu seinem Ursprung zeigt

Mit der Funktion atan2() wird der relative Winkel von einem Punkt zum anderen berechnet. Die Funktion akzeptiert zwei durch Kommas getrennte Werte als Parameter: die Position y und x des anderen Punkts, relativ zum Startpunkt am Ursprung 0,0.

Mit dem berechneten Wert ist es möglich, Elemente über die individuellen Transformationseigenschaften so zu drehen, dass sie einander gegenüberliegen.

Im folgenden Beispiel werden die Felder so gedreht, dass sie auf die Position der Maus 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 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 bearbeiten.