asin()
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 asin()
CSS Funktion ist eine trigonometrische Funktion, die den Arkussinus einer Zahl zwischen -1
und 1
zurückgibt. Die Funktion enthält eine einzige Berechnung, die die Anzahl der Radianten zurückgibt, die ein <angle>
zwischen -90deg
und 90deg
darstellt.
Syntax
/* 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 Arkussinus einer number
wird immer ein <angle>
zwischen -90deg
und 90deg
zurückgeben.
- Wenn
number
kleiner als-1
oder größer als1
ist, ist das ErgebnisNaN
. - Wenn
number
0⁻
ist, ist das Ergebnis0⁻
.
Formale Syntax
Beispiele
Elemente rotieren
Die asin()
Funktion kann verwendet werden, um Elemente zu rotieren
, da sie ein <angle>
zurückgibt.
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
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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
asin() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support