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

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

View in English Always switch to English

acos() 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 acos() CSS Funktion ist eine trigonometrische Funktion, die den Arkuskosinus einer Zahl zwischen -1 und 1 zurückgibt. Die Funktion enthält eine einzige Berechnung, die einen <angle> zwischen 0deg und 180deg zurückgibt.

Syntax

css
/* Single <number> values */
transform: rotate(acos(-0.2));
transform: rotate(acos(2 * 0.125));

/* Other values */
transform: rotate(acos(pi / 5));
transform: rotate(acos(e / 3));

Parameter

Die acos(number) Funktion akzeptiert nur einen Wert als ihren Parameter.

number

Eine Berechnung, die auf eine <number> zwischen -1 und 1 aufgelöst wird.

Rückgabewert

Der Arkuskosinus einer number gibt immer einen <angle> zwischen 0deg und 180deg zurück.

  • Wenn number kleiner als -1 oder größer als 1 ist, ist das Ergebnis NaN.
  • Wenn number genau 1 ist, ist das Ergebnis 0.

Formale Syntax

<acos()> = 
  acos( <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 acos() Funktion kann verwendet werden, um Elemente 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(acos(1));
}
div.box-2 {
  transform: rotate(acos(0.5));
}
div.box-3 {
  transform: rotate(acos(0));
}
div.box-4 {
  transform: rotate(acos(-0.5));
}
div.box-5 {
  transform: rotate(acos(-1));
}

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