Fonctions trigonométriques en CSS

Calculez le sinus, le cosinus, la tangente, etc. en CSS.

Bramus

Fonctions trigonométriques

En CSS, il est possible d'écrire des expressions mathématiques. La fonction calc() se trouve à la base pour effectuer des calculs, mais vous avez probablement déjà entendu parler de min(), max() et clamp().

Les fonctions trigonométriques sin(), cos(), tan(), asin(), acos(), atan() et atan2() sont jointes à ces fonctions. Ces fonctions sont définies dans le module "Valeurs CSS et unités de niveau 4" et sont disponibles dans tous les navigateurs.

sin(), cos() et tan()

Les trois principales fonctions trig sont les suivantes:

• cos(): renvoie le cosinus d'un angle, qui est une valeur comprise entre -1 et 1.
• sin(): renvoie le sinus d'un angle, qui est une valeur comprise entre -1 et 1.
• tan(): renvoie la tangente d'un angle, qui est une valeur comprise entre −∞ et +∞.

Contrairement à leurs équivalents JavaScript, ces fonctions acceptent à la fois des angles et des radians comme argument.

Dans la démonstration suivante, ces fonctions sont utilisées pour tracer les lignes qui forment le triangle entourant l'ensemble --angle:

• L'hypoténuse (ligne jaune) est une ligne allant du centre du cercle à la position du point. Sa longueur est égale au --radius du cercle.
• La ligne rouge "adversée" est une ligne à partir du centre du cercle le long de l'axe X. Sa longueur est égale à la --radius multipliée par le cosinus de --angle.
• "opposé" (ligne bleue) est une ligne à partir du centre du point le long de l'axe Y. Sa longueur est égale à la --radius multipliée par le sinus de la --angle.
• La fonction tan() de --angle permet de tracer la ligne verte du point vers l'axe X.

asin(), acos(), atan() et atan2()

Les équivalents arc ou inverse de sin(), cos() et tan() sont respectivement asin(), acos() et atan(). Ces fonctions effectuent le calcul dans le sens opposé: elles prennent une valeur numérique comme argument et renvoient l'angle correspondant.

Enfin, il y a atan2() qui accepte deux arguments A et B. La fonction renvoie l'angle entre l'axe X positif et le point (B,A).

Exemples

Il existe plusieurs cas d'utilisation de ces fonctions. Une petite sélection s'affiche ensuite.

Déplacer des éléments sur un tracé circulaire autour d'un point central

Dans la démonstration suivante, les points tournent autour d'un point central. Au lieu de faire pivoter chaque point autour de son propre centre, puis de le déplacer vers l'extérieur, chaque point est traduit sur les axes X et Y. Les distances sur les axes X et Y sont déterminées en tenant compte de cos() et, respectivement, de la sin() de --angle.

:root {
  --radius: 20vmin;
}

.dot {
  --angle: 30deg;
  translate: /* Translation on X-axis */
             calc(cos(var(--angle)) * var(--radius))

             /* Translation on Y-axis */
             calc(sin(var(--angle)) * var(--radius) * -1)
  ;
}

Pour répartir les points uniformément autour du point central, un décalage supplémentaire est attribué à chaque point en fonction de son indice nth-child. Par exemple, s'il y a trois points, il y a une distance de 120deg (= 360deg / 3) entre chacun d'eux.

• Le premier élément enfant sur trois est décalé de 0 x 120deg = 0deg.
• Le deuxième élément enfant sur trois est décalé de 1 x 120deg = 120deg.
• Le troisième élément enfant sur trois est décalé de 2 x 120deg = 240deg.

Faire pivoter un élément pour faire face à son origine

La fonction atan2() calcule l'angle relatif d'un point à un autre. La fonction accepte deux valeurs séparées par une virgule en tant que paramètres: les positions y et x de l'autre point, par rapport au point d'origine qui se trouve à l'origine 0,0.

Avec la valeur calculée, il est possible de faire pivoter les éléments pour qu'ils se mettent en face. Pour ce faire, utilisez les propriétés de transformation individuelles.

Dans l'exemple suivant, les boîtes sont pivotées de sorte qu'elles soient face à la position de la souris. La position de la souris est synchronisée avec une propriété personnalisée via JavaScript.

div.box {
  --my-x: 200;
  --my-y: 300;

  /* Position the box inside its parent */
  position: absolute;
  width: 50px;
  aspect-ratio: 1;
  translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);

  /* Rotate so that the box faces the mouse position */
  /* For this, take the box its own position and size (25 = half the width) into account */
  rotate: atan2(
            calc((var(--mouse-x) - var(--my-x) - 25) * 1),
            calc((var(--mouse-y) - var(--my-y) - 25) * -1)
          );
}

Temps forts de la communauté

Comme le montre cette bande de möbius animée d'Ana Tudor, cos() et sin() peuvent être utilisés pour bien plus que de simples traductions. Ici, leur résultat permet de manipuler les composants s et l de la fonction de couleur hsl().