acos()

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 acos() CSS Funktion ist eine trigonometrische Funktion, die den Arkuskosinus einer Zahl zwischen -1 und 1 zurückgibt. Die Funktion beinhaltet eine einzelne Berechnung, die die Anzahl von Radiant zurückgibt, welche ein <angle> zwischen 0deg und 180deg darstellt.

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 Funktion acos(number) akzeptiert nur einen Wert als Parameter.

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

Rückgabewert

Der Arkuskosinus einer number wird immer ein <angle> zwischen 0deg und 180deg zurückgeben.

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 Funktion acos() 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

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(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

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