Rotate() - Fonction CSS

Description des fonctions rotateX(), rotateY() et rotateZ().

Ces trois fonctions, utilisées avec la propriété transform, provoquent une rotation de l'élément autour de l'un des axes. Les rotations autour de l'axe Z maintiennent l'élément dans le plan de l'écran (transformation 2D), tandis que les rotations autour des axes X ou Y sont des transformations en 3D.

L'espace 3D est définit par trois axes, X, Y et Z, suivant la disposition ci-dessous. Les axes X et Y sont dans le plan de l'écran, tandis que l'axe Z est dirigé vers les yeux du lecteur.
Les flèches circulaires indiquent le sens de rotation pour une valeur d'angle positive.

Description de la fonction rotate().

La fonction rotate() est exactement équivalente à rotateZ() : elle définit une rotation autour de l'axe Z, c'est à dire dans le plan de l'écran (transformation 2D).

Description de la fonction rotate3d().

rotate3d() calcule une rotation dans le plan 3D. Cette rotation peut ensuite être appliquée à un élément par la propriété transform.

rotate3d() n'est pas un simple raccourci des trois autres fonctions de rotation car elle permet de définir un axe de rotation autre que l'un des trois axes standards.

rotate3d() peut cependant remplacer les trois fonctions de rotation élémentaires rotateX(),rotateY() et rotateZ(), au prix d'une légère complication de la syntaxe pour l'écriture des paramètres.

Remarque : pour que les rotations autour des axes X et Y soit visibles, il faut appliquer en plus un effet de perspective() sinon l'élément semble simplement écrasé. On utilise pour cela la fonction perspective() pour que la rotation soit perçue en tant que telle, et non pas comme un simple écrasement de l'élément. Exemple :

Ces fonctions de rotation peuvent être utilisées avec :

• transform : Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).

Syntaxe des fonctions de rotation.

• transform: rotateX(45deg); transform: rotateY(45deg); transform: rotateZ(45deg); transform: rotate(45deg);

  Ces quatre fonctions ont une syntaxe identique : une valeur est attendue suivie d'une unité angulaire (voir les unités d'angle). Cette valeur peut être positive ou négative.

  rotate() est équivalent à rotateZ().

  
  Rotation suivant l'axe X

  
  Rotation suivant l'axe Y

  
  Rotation suivant l'axe Z

Syntaxe de la fonction rotate3d().

• transform: rotate3d(1, 0, 0, 45deg); x y z a

  x, y et z sont trois valeurs sans unité. Elles définissent l'axe de rotation.
  Pour une rotation autour de l'axe X : rotate3d(1,0,0,a)
  Autour de l'axe Y : rotate3d(0,1,0,a)
  Et autour de l'axe Z : rotate3d(0,0,1,a)
  Mais toutes les combinaisons et valeurs intermédiaires sont possibles. Le schéma ci-dessous représente quelque chose comme rotate(1, 0.25, 0.4, a)

  

  a est une valeur numérique positive, négative ou nulle, suivie d'une unité d'angle (voir les unités d'angle). Cette valeur définit bien sûr l'angle de rotation autour de l'axe défini par les trois premières valeurs.

  Rotation suivant une combinaison des trois axes.
  transform:perspective(50px) rotate(5, 7, 1, 20deg);

Simulateur avec la fonction rotate().

Remarque : le simulateur utilise également la fonction perspective() pour que les rotations soit plus faciles à visualiser.

Support de la fonction rotate().

Les transformations 2D ou 3D sont parfaitement traitées par tous les navigateurs actuels.

Remarques :

(1) Ne supporte pas les transformations 2D sur les éléments SVG. Utilisez l'attribut transform à la place.

(2) Internet Explorer ne supporte pas transform-style:preserve-3d limitant ainsi l'imbrication des animations.

1

Transformations
2D

2

Transformations
3D

3

Fonction
rotateX()

4

Fonction
rotateY()

5

Fonction
rotateZ()

6

Fonction
rotate3D()

Estimation de la prise en charge globale.

97%

97%

96%

96%

96%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

2

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

Historique de la fonction rotate().

• Module CSS - Transformations - Niveau 1

  Première niveau de spécification concernant les transformations (en 2D).
  Présentation des différentes fonctions de transformation dont rotate().
  

  28 Février 2012

  Document de travail.

  

  14 Février 2019

  Candidat à la recommandation.

  

  

• Module CSS - Transformations - Niveau 2

  Le niveau 2 de la spécification sur les transformations introduit les transformations en 3D.
  Ajout de nouvelles fonctions de rotation : rotateX(), rotateY(), rotateZ() et rotate3d().
  Pas de changement concernant directement la fonction rotate().
  

  03 Mars 2020

  Document de travail.

  

  

  

Voir aussi, concernant les transformations.

Le module de spécification CSS Transforms Module regroupe toutes les propriétés et fonctions concernant les transformations en CSS :

Propriétés :

Fonctions :