CSS sin() Funktion

Definition und Verwendung

CSS sin() Die Funktion gibt den Sinus eines Winkels als Zahl zurück.

Der Sinus eines Winkels gibt immer einen Wert zwischen -1 und 1 zurück.

Beispiel

in calc() Funktion wird in sin() Um die Breite und Höhe der drei <div>-Elemente zu setzen:

div.a {
  width: calc(sin(0.25turn) * 120px);
  height: calc(sin(30deg) * 120px);
  background-color: salmon;
  margin-bottom: 25px;
}
div.b {
  width: calc(sin(90) * 120px);
  height: calc(sin(2*1.125) * 120px);
  background-color: green;
  margin-bottom: 25px;
}
div.c {
  width: calc(sin(pi/2) * 120px);
  height: calc(sin(pi/2) * 120px);
  background-color: maroon;
}

Selbst ausprobieren

CSS Syntax

sin(Winkel)
Wert Beschreibung
Winkel Notwendig. Das Ergebnis ist ein Ausdruck, der eine Zahl oder einen Winkel darstellt.

Technische Details

Version: CSS4

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Version des Browsers an, die diese Funktion vollständig unterstützt.

Chrome Edge Firefox Safari Opera
111 111 108 15.4 97

Verwandte Seite

Referenz:CSS acos() Funktion

Referenz:CSS asin() Funktion

Referenz:CSS atan() Funktion

Referenz:CSS atan2() Funktion

Referenz:CSS calc() Funktion

Referenz:CSS cos() Funktion

Referenz:CSS exp() Funktion

Referenz:CSS hypot() Funktion

Referenz:CSS log() Funktion

Referenz:CSS mod() Funktion

Referenz:CSS pow() Funktion

Referenz:CSS sqrt() Funktion

Referenz:CSS tan() Funktion