asin()

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 asin() est une fonction trigonométrique qui renvoie l'arc sinus 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 -90deg et 90deg.

Syntaxe

css

/* Valeurs numériques */
/* 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() prend un seul paramètre.

number: n nombre (une valeur de type <number>) compris entre -1 et 1. Si la valeur fournie inférieure à -1 ou supérieure à 1, ou NaN, le résultat de la fonction sera NaN.

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

Exemple

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

<div class="box"></div>
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></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(asin(-0.2));
}

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

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

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

Spécifications

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

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨21 sept. 2022⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content