atan2()
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2023 browserübergreifend verfügbar.
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 einen <angle> zwischen -180deg und 180deg zurück, ohne eine spezifische Einheit wie Radiant vorzuschlagen.
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 Funktion atan2(y, x) akzeptiert zwei durch Komma getrennte Werte als Parameter. Jeder Wert kann ein <number>, ein <dimension>, oder ein <percentage> sein. Beide Werte müssen vom gleichen Typ sein, obwohl sie, wenn sie <dimension> sind, unterschiedliche Einheiten haben können (Beispiel: atan2(100px, 5vw) ist gültig).
y-
Die y-Koordinate des Punktes. Eine Berechnung, die sich in ein
<number>, ein<dimension>, oder ein<percentage>auflöst. x-
Die x-Koordinate des Punktes. Eine Berechnung, die sich in ein
<number>, ein<dimension>, oder ein<percentage>auflöst.
Rückgabewert
Für zwei gegebene Werte x und y berechnet die Funktion atan2(y, x) und gibt den <angle> zwischen der positiven x-Achse und dem Strahl vom Ursprung zum 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 drehen
Die atan2()-Funktion kann verwendet werden, um Elemente zu rotieren, da sie einen <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
| Spezifikation |
|---|
| CSS Values and Units Module Level 4 # trig-funcs |