atan2()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2023.
Die atan2() CSS Funktion ist eine trigonometrische Funktion, die den inversen Tangens von zwei Werten zwischen -unendlich und unendlich zurückgibt. Die Funktion akzeptiert zwei Argumente und gibt die Anzahl der Bogenmaß zurück, die ein <angle> zwischen -180deg und 180deg darstellt.
Syntax
/* Two <number> values */
transform: rotate(atan2(3, 2));
/* Two <dimension> values */
transform: rotate(atan2(1rem, -0.5rem));
/* Two <percentage> values */
transform: rotate(atan2(20%, -30%));
/* Other values */
transform: rotate(atan2(pi, 45));
transform: rotate(atan2(e, 30));
Parameter
Die atan2(y, x) Funktion akzeptiert zwei durch Kommas getrennte Werte als ihre Parameter. Jeder Wert kann ein <number>, eine <dimension>, oder ein <percentage> sein. Beide Werte müssen vom gleichen Typ sein, obwohl sie bei <dimension> unterschiedliche Einheiten haben können (zum Beispiel: atan2(100px, 5vw) ist gültig).
y-
Die y-Koordinate des Punktes. Eine Berechnung, die sich zu einem
<number>, einer<dimension>, oder einem<percentage>auflöst. x-
Die x-Koordinate des Punktes. Eine Berechnung, die sich zu einem
<number>, einer<dimension>, oder einem<percentage>auflöst.
Rückgabewert
Für zwei Werte x und y berechnet und gibt die Funktion atan2(y, x) das <angle> zwischen der positiven x-Achse und dem Strahl vom Ursprung zu dem Punkt (x, y) zurück.
Formale Syntax
<atan2()> =
atan2( <calc-sum> , <calc-sum> )
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
Beispiele
Elemente rotieren
Die atan2() Funktion kann verwendet werden, um Elemente mit 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(atan2(3, 2));
}
div.box-2 {
transform: rotate(atan2(3%, -2%));
}
div.box-3 {
transform: rotate(atan2(-1, 0.5));
}
div.box-4 {
transform: rotate(atan2(1, 0.5));
}
div.box-5 {
transform: rotate(atan2(1rem, -0.5rem));
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Values and Units Module Level 4 # trig-funcs |