atan2() CSS-Funktion
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 Arkustangens von zwei Werten zwischen -infinity und infinity zurückgibt. Die Funktion akzeptiert zwei Argumente und gibt einen <angle> zwischen -180deg und 180deg zurück, ohne eine spezifische Einheit wie Radianten zu implizieren.
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 Komma getrennte Werte als ihre 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 auf ein
<number>, ein<dimension>oder ein<percentage>auflöst. x-
Die x-Koordinate des Punktes. Eine Berechnung, die sich auf ein
<number>, ein<dimension>oder ein<percentage>auflöst.
Rückgabewert
Bei gegebenen zwei Werten x und y berechnet die Funktion atan2(y, x) und gibt den <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 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 |