Dieatan()CSSFunktion ist eine trigonometrische Funktion, die den inversen Tangens einer Zahl zwischen-∞ und+∞ zurückgibt. Die Funktion enthält eine einzelne Berechnung, die einen<angle> zwischen-90deg und90deg 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

Dieatan(number) Funktion akzeptiert nur einen Wert als Parameter.

number

Eine Berechnung, die sich zu einer<number> zwischen-∞ und+∞ auflöst.

Rückgabewert

Der inverse Tangens einernumber gibt immer einen<angle> zwischen-90deg und90deg zurück.

• Wennnumber0⁻ ist, ist das Ergebnis0⁻.
• Wennnumber+∞ ist, ist das Ergebnis90deg.
• Wennnumber-∞ ist, ist das Ergebnis-90deg.

Das bedeutet:

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

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

Dieatan() Funktion kann verwendet werden, um Elemente mitrotate zu drehen, da sie einen<angle> zurückgibt.

HTML

<div></div><div></div><div></div><div></div><div></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()