Fonction CSS `sin()`

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.

Voir la compatibilit complte
En savoir plus

La fonction CSS sin() est une fonction trigonomtrique qui retourne le sinus d'un nombre, qui est une valeur comprise entre -1 et 1. La fonction contient un seul calcul qui doit se rsoudre soit en un nombre (<number>), soit en un angle (<angle>) en interprtant le rsultat de l'argument comme des radians. C'est--dire que sin(45deg), sin(0.125turn) et sin(3.14159 / 4) reprsentent tous la mme valeur, environ 0.707.

Exemple interactif

transform: translateX(calc(cos(0deg) * 140px))
  translateY(calc(sin(0deg) * -140px));

transform: translateX(calc(cos(90deg) * 140px))
  translateY(calc(sin(90deg) * -140px));

transform: translateX(calc(cos(135deg) * 140px))
  translateY(calc(sin(135deg) * -140px));

transform: translateX(calc(cos(180deg) * 140px))
  translateY(calc(sin(180deg) * -140px));

transform: translateX(calc(cos(-45deg) * 140px))
  translateY(calc(sin(-45deg) * -140px));

<div class="circle">
  <span class="dot" id="example-element"></span>
</div>

:root {
  --radius: 140px;
  --dot-size: 10px;
}
.circle {
  display: grid;
  place-content: center;
  margin: 0 auto;
  width: calc(var(--radius) * 2);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #666666;
  background-image:
    radial-gradient(black var(--dot-size), transparent var(--dot-size)),
    linear-gradient(135deg, blue, deepskyblue, lightgreen, lavender, honeydew);
}
.dot {
  display: block;
  width: var(--dot-size);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #666666;
  background-color: #ff6666;
  transform: translateX(calc(cos(0deg) * var(--radius)))
    translateY(calc(sin(0deg) * var(--radius) * -1));
}

Syntaxe

css

/* Un seule valeur <angle> */
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));
width: calc(100px * sin(1.0471967rad));

/* Un seule valeur <number> */
width: calc(100px * sin(63.673));
width: calc(100px * sin(2 * 0.125));

/* Autres valeurs */
width: calc(100px * sin(pi / 2));
width: calc(100px * sin(e / 4));

Paramtres

La fonction sin(angle) n'accepte qu'une seule valeur comme paramtre.

angle: Un calcul qui se rsout en un nombre (<number>) ou en un angle (<angle>). Lorsqu'on dfinit des nombres sans unit, ils sont interprts comme un nombre de radians, reprsentant un angle (<angle>).

Valeur de retour

Le sinus d'un angle retourne toujours un nombre compris entre 1 et 1.

Si angle est infinity, -infinity ou NaN, le rsultat est NaN.
Si angle est 0, le rsultat est 0.

Syntaxe formelle

<sin()> = 
  sin( <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

Cette syntaxe reflte le dernier standard selon CSS Values and Units Module Level 4. Tous les navigateurs n'ont peut-tre pas implment toutes les parties. Voir la Compatibilit des navigateurs pour plus d'informations sur la prise en charge.

Exemples

Changer la taille des botes

Dans cet exemple, sin(30deg) retourne 0.5, ce qui donne la bote une largeur de 50px et une hauteur de 50px.

css

div {
  background-color: red;
  width: calc(sin(30deg) * 100px);
  height: calc(sin(30deg) * 100px);
}

Contrler la dure de l'animation

Un autre cas d'utilisation est de contrler la dure de l'animation (animation-duration), en rduisant la dure en fonction de la valeur du sinus. Dans ce cas, la dure de l'animation est de 1s.

css

div {
  animation-name: myAnimation;
  animation-duration: calc(sin(0.25turn) * 1s);
}

Spcifications

Spcification
CSS Values and Units Module Level 4 # trig-funcs

Compatibilit des navigateurs

Voir aussi

La fonction cos()
La fonction tan()
La fonction asin()
La fonction acos()
La fonction atan()
La fonction atan2()

Aider amliorer MDN

Cette page vous a-t-elle t utile ?

Oui Non

Apprendre contribuer

Cette page a t modifie le 10 mai 2026 par les contributeurices du MDN.

Voir cette page sur GitHub Signaler un problme avec ce contenu

Fonction CSS sin()

Dans cet article

Aider amliorer MDN

Fonction CSS `sin()`