atan() CSS-Funktion

Die atan() CSS Funktion ist eine trigonometrische Funktion, die den Arkustangens einer Zahl zwischen -∞ und +∞ zurückgibt. Die Funktion enthält eine einzelne Berechnung, die einen <angle> zwischen -90deg und 90deg zurückgibt.

Syntax

/* Single <number> values */
transform: rotate(atan(1));
transform: rotate(atan(4 * 50));
/* Other values */
transform: rotate(atan(pi / 2));
transform: rotate(atan(e * 3));

Parameter

Die atan(number)-Funktion akzeptiert nur einen Wert als Parameter.

number

Eine Berechnung, die in eine <number> zwischen -∞ und +∞ aufgelöst wird.

Rückgabewert

Der Arkustangens einer number gibt immer einen <angle> zwischen -90deg und 90deg zurück.

• Wenn number 0− ist, ist das Ergebnis 0−.
• Wenn number +∞ ist, ist das Ergebnis 90deg.
• Wenn number -∞ ist, ist das Ergebnis -90deg.

Das bedeutet:

• atan(-infinity) entspricht -90deg.
• atan(-1) entspricht -45deg
• atan(0) entspricht 0deg
• atan(1) entspricht 45deg
• atan(infinity) entspricht 90deg.

Formale Syntax

<atan()> = 
 atan( <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 atan()-Funktion kann verwendet werden, um Elemente mit rotate zu drehen, 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

body {
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 50px;
}

div.box {
 width: 100px;
 height: 100px;
 background: linear-gradient(orange, red);
}
div.box-1 {
 transform: rotate(atan(-99999));
}
div.box-2 {
 transform: rotate(atan(-1));
}
div.box-3 {
 transform: rotate(atan(0));
}
div.box-4 {
 transform: rotate(atan(1));
}
div.box-5 {
 transform: rotate(atan(99999));
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• sin()
• cos()
• tan()
• asin()
• acos()
• atan2()