asin()
Baseline 2023
Newly 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 asin()
CSS Funktion ist eine trigonometrische Funktion, die den Arcus-Sinus einer Zahl zwischen -1
und 1
zurückgibt. Die Funktion enthält eine einzelne Berechnung, die die Anzahl der Bogenmaß in einem <angle>
zwischen -90deg
und 90deg
darstellt.
Syntax
css
/* Single <number> values */
transform: rotate(asin(-0.2));
transform: rotate(asin(2 * 0.125));
/* Other values */
transform: rotate(asin(pi / 5));
transform: rotate(asin(e / 3));
Parameter
Rückgabewert
Der Arcus-Sinus einer number
gibt immer einen <angle>
zwischen -90deg
und 90deg
zurück.
- Wenn
number
kleiner als-1
oder größer als1
ist, lautet das ErgebnisNaN
. - Wenn
number
0⁻
ist, lautet das Ergebnis0⁻
.
Formale Syntax
Beispiele
Elemente drehen
Die asin()
Funktion kann verwendet werden, um Elemente mit der rotate
Funktion zu drehen, da sie einen <angle>
zurückgibt.
HTML
html
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
CSS
css
div.box {
width: 100px;
height: 100px;
background: linear-gradient(orange, red);
}
div.box-1 {
transform: rotate(asin(1));
}
div.box-2 {
transform: rotate(asin(0.5));
}
div.box-3 {
transform: rotate(asin(0));
}
div.box-4 {
transform: rotate(asin(-0.5));
}
div.box-5 {
transform: rotate(asin(-1));
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Values and Units Module Level 4 # trig-funcs |
Browser-Kompatibilität
BCD tables only load in the browser