Cette page a été traduite par l'API Cloud Translation.

Fonctions trigonométriques en CSS

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

Bramus

Fonctions trigonométriques

En CSS, vous pouvez é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.

Navigateurs pris en charge

Source

`sin()`, `cos()` et `tan()`

Les trois fonctions trigonométriques de base 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 à la fois des angles et des radians comme argument.

Dans la démonstration suivante, ces fonctions sont utilisées pour dessiner les lignes qui constituent 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 "adjacente" (ligne rouge) part du centre du cercle et suit 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 du point vers 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

Ces fonctions ont différents cas d'utilisation. 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 pour qu'ils se fassent face à l'aide des propriétés de transformation individuelle.

Dans l'exemple suivant, les cases sont pivotées de sorte qu'elles soient 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().