atan()

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 inversen Tangens einer Zahl zwischen -∞ und +∞ zurückgibt. Die Funktion enthält eine einzelne Berechnung, die einen <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 Parameter.

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

Rückgabewert

Der inverse Tangens 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

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;
}

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