atan()

Baseline 2023
Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die atan() CSS-Funktion ist eine trigonometrische Funktion, die den inversen Tangens einer Zahl zwischen -∞ und +∞ zurückgibt. Die Funktion beinhaltet eine einzige Berechnung, die die Anzahl der Bogenmaß repräsentierend ein <angle> zwischen -90deg und 90deg zurückgibt.

Syntax

css
/* 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 ihren Parameter.

number

Eine Berechnung, die zu einer <number> zwischen -∞ und +∞ führt.

Rückgabewert

Der inverse Tangens einer number wird immer ein <angle> zwischen -90deg und 90deg zurückgeben.

  • 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) repräsentiert -90deg.
  • atan(-1) repräsentiert -45deg
  • atan(0) repräsentiert 0deg
  • atan(1) repräsentiert 45deg
  • atan(infinity) repräsentiert 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 rotieren

Die atan()-Funktion kann verwendet werden, um Elemente mit rotate zu drehen, da sie ein <angle> zurückgibt.

HTML

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

css
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

Specification
CSS Values and Units Module Level 4
# trig-funcs

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch