1. Web
  2. CSS
  3. Reference
  4. Values
  5. atan()

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

atan() 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 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 liefert.

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 Parameter.

number

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

Rückgabewert

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

  • Falls number 0⁻ ist, ist das Ergebnis 0⁻.
  • Falls number +∞ ist, ist das Ergebnis 90deg.
  • Falls 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 mittels rotate zu drehen, da sie einen <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

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden