Fonction CSS `atan2()`

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 atan2() est une fonction trigonométrique qui retourne l'arc tangente de deux valeurs comprises entre -∞ et +∞. La fonction accepte deux arguments et retourne un angle (<angle>) compris entre -180deg et 180deg, sans impliquer d'unité spécifique comme les radians.

Syntaxe

css

/* Deux valeurs de type <number> */
transform: rotate(atan2(3, 2));

/* Deux valeurs de type <dimension> */
transform: rotate(atan2(1rem, -0.5rem));

/* Deux valeurs de type <percentage> */
transform: rotate(atan2(20%, -30%));

/* Autres valeurs */
transform: rotate(atan2(pi, 45));
transform: rotate(atan2(e, 30));

Paramètres

La fonction atan2(y, x) accepte deux valeurs séparées par des virgules comme paramètres. Chaque valeur peut être un nombre (<number>), une dimension (<dimension>) ou un pourcentage (<percentage>). Les deux valeurs doivent être du même type, bien que si elles sont des dimensions, elles peuvent être de différentes unités (exemple : atan2(100px, 5vw) est valide).

y: La coordonnée y du point. Un calcul qui résout à un nombre (<number>), une dimension (<dimension>) ou un pourcentage (<percentage>).
x: La coordonnée x du point. Un calcul qui résout à un nombre (<number>), une dimension (<dimension>) ou un pourcentage (<percentage>).

Valeur de retour

Étant donné deux valeurs x et y, la fonction atan2(y, x) calcule et retourne l'angle (<angle>) entre l'axe des x positif et le rayon partant de l'origine vers le point (x, y).

Syntaxe formelle

<atan2()> = 
  atan2( <calc-sum> , <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 atan2() 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(atan2(3, 2));
}
div.box-2 {
  transform: rotate(atan2(3%, -2%));
}
div.box-3 {
  transform: rotate(atan2(-1, 0.5));
}
div.box-4 {
  transform: rotate(atan2(1, 0.5));
}
div.box-5 {
  transform: rotate(atan2(1rem, -0.5rem));
}