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'unetechnologie expérimentale.
Vérifiez attentivement letableau de compatibilité des navigateurs avant de l'utiliser en production.

Lafonction CSSacos() est une fonction trigonométrique qui renvoie le cosinus inverse d'un nombre compris entre-1 et1. Cette fonction effectue un unique calcul qui renvoie le nombre correspondant de radians représentantun angle entre0deg et180deg.

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 fonctionacos() prend un seul paramètre.

number: Un nombre (une valeur de type<number>) compris entre-1 et1. Si la valeur fournie est1, le résultat de la fonction sera0.

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 fonctionacos() peut être utilisée dans les transformations angulaires, par exemple avecrotate(), car elle renvoie une valeur de type<angle>.

<div></div><div></div><div></div><div></div><div></div>

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