Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

acos()

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨mars 2023⁩.

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

La fonction CSS acos() est une fonction trigonométrique qui renvoie le cosinus inverse d'un nombre compris entre -1 et 1. Cette fonction effectue un unique calcul qui renvoie le nombre correspondant de radians représentant un angle entre 0deg et 180deg.

Syntaxe

css
/* Valeurs numériques */
/* Type <number> */
transform: rotate(acos(-0.2));
transform: rotate(acos(2 * 0.125));

/* Autres valeurs */
transform: rotate(acos(pi / 5));
transform: rotate(acos(e / 3));

Paramètres

La fonction acos() prend un seul paramètre.

number

Un nombre (une valeur de type <number>) compris entre -1 et 1. Si la valeur fournie est 1, le résultat de la fonction sera 0.

Syntaxe formelle

<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

Exemples

La fonction acos() peut être utilisée dans les transformations angulaires, par exemple avec rotate(), car elle renvoie une valeur de type <angle>.

css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}

div.box-1 {
  transform: rotate(acos(-0.2));
}

div.box-2 {
  transform: rotate(acos(2 * 0.125));
}

div.box-3 {
  transform: rotate(acos(pi / 5));
}

div.box-4 {
  transform: rotate(acos(e / 3));
}

Spécifications

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

Compatibilité des navigateurs

Voir aussi