Fonctions trigonométriques en CSS

Calculez le sinus, le cosinus, la tangente et plus encore en CSS.

Bramus

Fonctions trigonométriques

Avec CSS, il est possible d'écrire des expressions mathématiques. La fonction calc() est utilisée pour effectuer des calculs, mais vous avez probablement également entendu parler de min(), max() et clamp().

Les fonctions trigonométriques sin(), cos(), tan(), asin(), acos(), atan() et atan2() s'ajoutent à ces fonctions. Ces fonctions sont définies dans le module CSS Values and Units Level 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 sont utilisées pour 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 ligne "adjointe" (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 la --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 arcs ou inverses de sin(), cos() et tan() sont respectivement asin(), acos() et atan(). Ces fonctions effectuent le calcul dans le sens inverse : 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

Il existe différents cas d'utilisation de ces fonctions. Voici une petite sélection.

Déplacer des éléments sur un chemin 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 la cos() et, respectivement, 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 de manière uniforme 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, une distance de 120deg (= 360deg / 3) est appliquée entre chaque point.

• 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 qu'il soit orienté vers 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)
          );
}

Particularités de la communauté

Comme le montre cet animation de ruban de Möbius par Ana Tudor, cos() et sin() peuvent être utilisés pour d'autres applications que les traductions. Ici, leur résultat est utilisé pour manipuler les composants s et l de la fonction de couleur hsl().