Fonction CSS `asin()`

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 asin() est une fonction trigonométrique qui retourne l'arc sinus d'un nombre compris entre -1 et 1. Cette fonction effectue un unique calcul qui retourne un angle (<angle>) entre -90deg et 90deg.

Syntaxe

css

/* Valeurs de type <number> */
transform: rotate(asin(-0.2));
transform: rotate(asin(2 * 0.125));

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

Paramètres

La fonction asin(number) n'accepte qu'une seule valeur comme paramètre.

number: Un calcul qui se résout en un nombre (<number>) compris entre -1 et 1.

Valeur de retour

L'arc sinus d'un number retourne toujours un angle (<angle>) compris entre -90deg et 90deg.

Si number est inférieur à -1 ou supérieur à 1, le résultat est NaN.
Si number est 0⁻, le résultat est 0⁻.

Syntaxe formelle

<asin()> = 
  asin( <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 asin() 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(asin(1));
}
div.box-2 {
  transform: rotate(asin(0.5));
}
div.box-3 {
  transform: rotate(asin(0));
}
div.box-4 {
  transform: rotate(asin(-0.5));
}
div.box-5 {
  transform: rotate(asin(-1));
}