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.

La fonction CSS sin() est une fonction trigonométrique 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 résoudre soit en un nombre (<number>), soit en un angle (<angle>) en interprétant le résultat de l'argument comme des radians. C'est-à-dire que sin(45deg), sin(0.125turn) et sin(3.14159 / 4) représentent tous la même 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));

Paramètres

La fonction sin(angle) n'accepte qu'une seule valeur comme paramètre.

angle: Un calcul qui se résout en un nombre (<number>) ou en un angle (<angle>). Lorsqu'on définit des nombres sans unité, ils sont interprétés comme un nombre de radians, représentant 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 résultat est NaN.
Si angle est 0⁻, le résultat 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

Exemples

Changer la taille des boîtes

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

css

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

Contrôler la durée de l'animation

Un autre cas d'utilisation est de contrôler la durée de l'animation (animation-duration), en réduisant la durée en fonction de la valeur du sinus. Dans ce cas, la durée de l'animation est de 1s.

css

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

Spécifications

Spécification
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 à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 10 mai 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Fonction CSS sin()

Aider à améliorer MDN

Fonction CSS `sin()`