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 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
| Specification |
|---|
| CSS Values and Units Module Level 4 # trig-funcs |