atan()
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 atan()
CSS Funktion ist eine trigonometrische Funktion, die den Arkustangens einer Zahl zwischen -∞
und +∞
zurückgibt. Die Funktion enthält eine einzelne Berechnung, die die Anzahl der Bogenmaß-Radianten zurückgibt, die ein <angle>
zwischen -90deg
und 90deg
darstellt.
Syntax
/* Single <number> values */
transform: rotate(atan(1));
transform: rotate(atan(4 * 50));
/* Other values */
transform: rotate(atan(pi / 2));
transform: rotate(atan(e * 3));
Parameter
Rückgabewert
Der Arkustangens einer number
wird immer ein <angle>
zwischen -90deg
und 90deg
zurückgeben.
- Wenn
number
0⁻
ist, ist das Ergebnis0⁻
. - Wenn
number
+∞
ist, ist das Ergebnis90deg
. - Wenn
number
-∞
ist, ist das Ergebnis-90deg
.
Das bedeutet:
atan(-infinity)
entspricht-90deg
.atan(-1)
entspricht-45deg
atan(0)
entspricht0deg
atan(1)
entspricht45deg
atan(infinity)
entspricht90deg
.
Formale Syntax
Beispiele
Elemente drehen
Die atan()
-Funktion kann verwendet werden, um Elemente mit der rotate
zu drehen, 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(atan(-99999));
}
div.box-2 {
transform: rotate(atan(-1));
}
div.box-3 {
transform: rotate(atan(0));
}
div.box-4 {
transform: rotate(atan(1));
}
div.box-5 {
transform: rotate(atan(99999));
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Values and Units Module Level 4 # trig-funcs |
Browser-Kompatibilität
BCD tables only load in the browser