Fonction CSS `acos()`

Baseline Large disponibilité

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.

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 (<angle>) entre 0deg et 180deg.

Syntaxe

css

/* Valeurs de 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 une seule valeur en paramètre.

number: Un nombre (<number>) compris entre -1 et 1.

Valeur de retour

Le cosinus inverse d'un number retourne toujours un angle (<angle>) compris entre 0deg et 180deg.

Si number est inférieur à -1 ou supérieur à 1, le résultat est NaN.
Si number est exactement 1, le résultat est 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

Faire pivoter des éléments

La fonction acos() peut être utilisée avec rotate pour faire pivoter des éléments, car elle retourne un angle (<angle>).

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