Fonction CSS `rotate()`

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 juillet 2015.

En savoir plus
Voir la compatibilit complte

La fonction CSS rotate() dfinit une transformation qui fait pivoter un lment autour d'un point fixe du plan 2D, sans le dformer. Son rsultat est un type de donne <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'lment pivote mentionn ci-dessus est aussi appel origine de transformation. Par dfaut, il s'agit du centre de l'lment, mais vous pouvez dfinir votre propre origine de transformation l'aide de la proprit transform-origin.

Note : L'attribut SVG transform a sa propre syntaxe, dans laquelle rotate() accepte deux valeurs supplmentaires optionnelles donnant le centre de rotation, comme dans rotate(45, 50, 50). Cette forme n'est valide que dans l'attribut, pas en CSS : la fonction CSS rotate() prend uniquement un angle, et le centre est dfini avec transform-origin.

Syntaxe

css

rotate(a)

Valeurs

a: Un type <angle> reprsentant l'angle de rotation. Le sens de la rotation dpend du sens d'criture. En contexte de gauche droite, un angle positif indique une rotation dans le sens horaire, un angle ngatif dans le sens antihoraire. En contexte de droite gauche, un angle positif indique une rotation dans le sens antihoraire, un angle ngatif dans le sens horaire. Une rotation de 180 est appele symtrie centrale.

Coordonnes cartsiennes sur ^2 (angl.)	Coordonnes homognes sur ^2	Coordonnes cartsiennes sur ^3 (angl.)	Coordonnes homognes sur ^3 (angl.)
(cos(a)-sin(a)sin(a)cos(a))\left( \begin{array}{cc} \cos(a) & -\sin(a) \\ \sin(a) & \cos(a) \end{array} \right)	(cos(a)-sin(a)0sin(a)cos(a)0001)\left( \begin{array}{ccc} \cos(a) & -\sin(a) & 0 \\ \sin(a) & \cos(a) & 0 \\ 0 & 0 & 1 \end{array} \right)	(cos(a)-sin(a)0sin(a)cos(a)0001)\left( \begin{array}{ccc} \cos(a) & -\sin(a) & 0 \\ \sin(a) & \cos(a) & 0 \\ 0 & 0 & 1 \end{array} \right)	(cos(a)-sin(a)00sin(a)cos(a)0000100001)\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> ] )

Cette syntaxe reflte le dernier standard selon CSS Transforms Module Level 1. 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

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;
}

Rsultat

Combiner une rotation avec une autre transformation

Si vous souhaitez appliquer plusieurs transformations un lment, faites attention l'ordre dans lequel vous dfinissez les transformations. Par exemple, si vous effectuez une rotation avant un dplacement, le dplacement s'effectue le long du nouvel axe de rotation !

HTML

html

<div>Normal</div>
<div class="rotate">Tourn</div>
<div class="rotate-translate">Tourn + Dplac</div>
<div class="translate-rotate">Dplac + 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);
}