sin()
Baseline 2023Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die sin()
CSS Funktion ist eine trigonometrische Funktion, die den Sinus einer Zahl zurückgibt, was ein Wert zwischen -1
und 1
ist. Die Funktion enthält eine einzelne Berechnung, die sich entweder zu einer <number>
oder einem <angle>
auflösen muss, indem das Ergebnis des Arguments als Bogenmaß interpretiert wird. Das bedeutet, sin(45deg)
, sin(0.125turn)
und sin(3.14159 / 4)
repräsentieren alle denselben Wert, ungefähr 0.707
.
Syntax
/* Single <angle> values */
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));
width: calc(100px * sin(1.0471967rad));
/* Single <number> values */
width: calc(100px * sin(63.673));
width: calc(100px * sin(2 * 0.125));
/* Other values */
width: calc(100px * sin(pi / 2));
width: calc(100px * sin(e / 4));
Parameter
Rückgabewert
Der Sinus eines angle
wird immer eine Zahl zwischen −1
und 1
zurückgeben.
- Wenn
angle
infinity
,-infinity
oderNaN
ist, ist das ErgebnisNaN
. - Wenn
angle
0⁻
ist, ist das Ergebnis0⁻
.
Formale Syntax
Beispiele
Ändern der Box-Größen
In diesem Beispiel wird sin(30deg)
0.5
zurückgeben, wodurch die Box eine Breite von 50px
und eine Höhe von 50px
hat.
div {
background-color: red;
width: calc(sin(30deg) * 100px);
height: calc(sin(30deg) * 100px);
}
Steuerung der Animationsdauer
Ein weiterer Anwendungsfall ist die Kontrolle der animation-duration
, indem die Dauer basierend auf dem Sinuswert reduziert wird. In diesem Fall wird die Animationsdauer 1s
betragen.
div {
animation-name: myAnimation;
animation-duration: calc(sin(0.25turn) * 1s);
}
Spezifikationen
Specification |
---|
CSS Values and Units Module Level 4 # trig-funcs |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
sin() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support