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 von 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 Funktion atan2(y, x) akzeptiert zwei durch Komma getrennte Werte als Parameter. Jeder Wert kann eine <number>, eine <dimension>, oder ein <percentage> sein. Beide Werte müssen vom gleichen Typ sein, obwohl sie, falls es sich um <dimension> handelt, unterschiedliche Einheiten haben können (Beispiel: atan2(100px, 5vw) ist gültig).
y-
Die y-Koordinate des Punktes. Eine Berechnung, die auf eine
<number>, eine<dimension>, oder ein<percentage>hinausläuft. x-
Die x-Koordinate des Punktes. Eine Berechnung, die auf eine
<number>, eine<dimension>, oder ein<percentage>hinausläuft.
Rückgabewert
Bei gegebenen zwei Werten x und y berechnet die Funktion atan2(y, x) und gibt das <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 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 |
Browser-Kompatibilität
Loading…