Fonctions trigonométriques en CSS

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

Bramus

Fonctions trigonométriques

Avec CSS, il est possible d'écrire des expressions mathématiques. La base se trouve la fonction calc(), qui permet d'effectuer des calculs, mais vous avez probablement aussi 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 et unités CSS 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 homologues JavaScript, ces fonctions acceptent les angles et les radians comme argument.

Dans la démonstration suivante, ces fonctions permettent de dessiner les lignes qui composent le triangle entourant l'ensemble --angle:

• L'hypoténuse (ligne jaune) est une ligne reliant le centre du cercle à la position du point. Sa longueur est égale à la --radius du cercle.
• La couche adjacente (ligne rouge) est une ligne partant du centre du cercle le long de l'axe X. Sa longueur est égale à la --radius multipliée par le cosinus de --angle.
• L’« opposé » (ligne bleue) est une ligne partant 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 entre le point et 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 la direction opposée: elles prennent une valeur numérique comme argument et renvoient l'angle correspondant.

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

Exemples

Ces fonctions peuvent être utilisées dans divers cas d'utilisation. Voici une petite sélection.

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 respectivement de la cos() et de la sin() de la --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 index 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 comme paramètres: la position y et x de l'autre point, par rapport au point d'origine situé à l'origine 0,0.

Avec la valeur calculée, vous pouvez faire pivoter les éléments de sorte qu'ils soient face à face, à l'aide des propriétés de transformation individuelle.

Dans l'exemple suivant, les boîtes sont pivotées de manière à être orientées vers l'emplacement 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)
          );
}

Sélection de la communauté

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