rotate()

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

La fonction CSS rotate() définit une transformation qui fait pivoter un élément autour d'un point fixe du plan 2D, sans le déformer. Son résultat est un type de donnée <transform-function>.

Exemple interactif

transform: rotate(0);

transform: rotate(90deg);

transform: rotate(-0.25turn);

transform: rotate(3.142rad);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Le point fixe autour duquel l'élément pivote — mentionné ci-dessus — est aussi appelé origine de transformation. Par défaut, il s'agit du centre de l'élément, mais vous pouvez définir votre propre origine de transformation à l'aide de la propriété transform-origin.

Syntaxe

css

rotate(a)

Valeurs

a: Un type <angle> représentant l'angle de rotation. Le sens de la rotation dépend du sens d'écriture. En contexte de gauche à droite, un angle positif indique une rotation dans le sens horaire, un angle négatif dans le sens antihoraire. En contexte de droite à gauche, un angle positif indique une rotation dans le sens antihoraire, un angle négatif dans le sens horaire. Une rotation de 180° est appelée symétrie centrale.

Coordonnées cartésiennes sur ℝ^2 ^(angl.)	Coordonnées homogènes sur ℝℙ^2	Coordonnées cartésiennes sur ℝ^3 ^(angl.)	Coordonnées homogènes sur ℝℙ^3 ^(angl.)
$\left( \begin{array}{cc} \cos(a) & -\sin(a) \\ \sin(a) & \cos(a) \end{array} \right)$	$\left( \begin{array}{ccc} \cos(a) & -\sin(a) & 0 \\ \sin(a) & \cos(a) & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} \cos(a) & -\sin(a) & 0 \\ \sin(a) & \cos(a) & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} \cos(a) & -\sin(a) & 0 & 0 \\ \sin(a) & \cos(a) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{array} \right)$
	`[cos(a) sin(a) -sin(a) cos(a) 0 0]`

Syntaxe formelle

<rotate()> = 
  rotate( [ <angle> | <zero> ] )

Exemples

Exemple simple

HTML

html

<div>Normal</div>
<div class="rotated">Tourné</div>

CSS

css

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /* Égal à rotateZ(45deg) */
  background-color: pink;
}

Résultat

Combiner une rotation avec une autre transformation

Si vous souhaitez appliquer plusieurs transformations à un élément, faites attention à l'ordre dans lequel vous définissez les transformations. Par exemple, si vous effectuez une rotation avant une translation, la translation s'effectuera le long du nouvel axe de rotation !

HTML

html

<div>Normal</div>
<div class="rotate">Tourné</div>
<div class="rotate-translate">Tourné + Déplacé</div>
<div class="translate-rotate">Déplacé + Tourné</div>

CSS

css

div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}

Résultat

Spécifications

Specification
CSS Transforms Module Level 1 # funcdef-transform-rotate

Compatibilité des navigateurs

Voir aussi

La propriété transform
La propriété rotate
Le type de donnée <transform-function>
La fonction rotate3d()

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨25 nov. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content