Rotate - Propriété CSS

Schéma syntaxique de rotate.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• angle est une valeur numérique suivie d'une des unités d'angle.
• a b c sont trois valeurs permettant de définir un axe de rotation non orthogonal.

Description de la propriété rotate.

La propriété rotate définit les rotations à appliquer à l'élément, suivant un ou plusieurs des trois axes. Elle accepte plusieurs syntaxes, qui correspondent aux rotations suivant les axes x, y et z, ou n'importe quel axe intermédiaire.

Les axes sont définis de la façon suivante. L'axe Z est dirigé depuis l'écran vers l’œil du lecteur. Les flèches circulaires indiquent le sens de rotation correspondant à un angle positif.

Remarque : les rotations sont des transformations : elles n'interagissent donc pas du tout avec la mise en page. Le fait de tourner un élément par exemple ne va pas décaler les éléments qui suivent. La conséquence est que l'élément qui subit une transformation (une rotation) peut entrer en collision avec un autre élément et se superposer à lui.

Effet de perspective.

Les rotations suivant les axes X et Y ne donnent pas l'impression que l'élément a tourné, mais sont plutôt traduites par un rétrécissement horizontal pour une rotation autour de l'axe Y, ou un rétrécissement vertical pour une rotation autour de X. Mais en appliquant un effet de perspective, on retrouve l'idée d'une rotation. Reportez-vous à la propriété perspective ou la fonction perspective() pour apprendre comment appliquer un effet de perspective.
Cet effet de perspective a été appliqué à tous les exemples plus bas dans cette page, afin que les rotations soient perceptibles quelque soit l'axe choisi.

Différence avec les fonctions.

La fonction rotate() existe également, et joue un rôle comparable lorsqu'elle est associé à la propriété transform... à une petite différence près : la propriété rotate ne tourne pas les axes. Cela peut provoquer des différences sensibles par exemple lorsqu'une rotation et une translation sont enchaînées.

Valeurs pour rotate.

• rotate: none;

  Aucune rotation n'est appliquée à l'élément.

• rotate: 35deg;

  Si une seule valeur unique est spécifiée, l'élément est tourné autour de l'axe z.

  La valeur doit être suivie d'une des unités angulaires (voir les unités d'angle). Les pourcentages ne sont pas acceptés.

  Les valeurs négatives sont acceptées, elles provoquent une rotation dans le sens inverse des aiguilles d'une montre.

• rotate: x 35deg;

  Il est possible de préciser l'axe autour duquel la rotation doit s'effectuer.

  Les rotations suivant les axes x ou y ne produisent un effet de rotation visible que si un effet de perspective a été appliqué. Voir à ce sujet la propriété perspective ou la fonction perspective().

  
  rotate:x 10deg
  Rotation autour de l'axe X
  Syntaxe équivalente à
  transform:rotateX(10deg);

  
  rotate:y 10deg
  Rotation autour de l'axe Y
  Syntaxe équivalente à
  transform:rotateY(10deg);

  
  rotate:z 10deg
  Rotation autour de l'axe Z
  Syntaxe équivalente à
  transform:rotateZ(10deg);
  ou à rotate:10deg
• rotate: 1 2 1 10deg;

  Les trois premières valeurs définissent l'axe de rotation en 3D ; la quatrième valeur est l'angle de rotation autour de cet axe.

  On a les équivalences suivantes :

  Syntaxe à 4 valeurs	Équivalente à
  rotate: 1 0 0 45deg;	rotate:45deg x;
  rotate: 0 1 0 30deg;	rotate:30deg y;
  rotate: 0 0 1 15deg;	rotate:15deg z;

  Mais cette syntaxe à quatre valeurs va beaucoup plus loin que les syntaxes de base : elle permet de définir n'importe quel axe de rotation en 3D.

  

• rotate: initial; (none) rotate: inherit; rotate: revert; rotate: revertLayer; rotate: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété rotate.

La propriété rotate est particulièrement adaptée aux animations. Son paramètre angulaire, qui évolue entre 0 et 360 degrés donne des animations très fluides.

Le premier exemple ci-dessous est simplement une animation de la rotation autour de l'axe Z (dans le plan 2D). La deuxième animation est plus complexe : nous avons fait varier l'orientation de l'axe de rotation.

Manipulation de la propriété rotate par programme.

Modifier la valeur de rotate en Javascript.

Javascript accepte deux syntaxes pour modifier la valeur d'une propriété. L'exemple ci-dessous applique la valeur 30 grades à la propriété rotate. Rappelons que, à défaut d'une indication de l'axe, la rotation s'effectue autour de l'axe Z.

let el = document.getElementById('id'); el.style['rotate'] = '30grad'; // ou let el = document.getElementById('id'); el.style.rotate = '30grad';

Lire en Javascript la valeur de rotate.

Le code ci-dessous récupère la valeur de la propriété rotate à condition que celle-ci ait été affectée dans l'attribut style de l'élément, en HTML. Les valeurs de propriété affectées via un sélecteur CSS ne sont pas prise en compte par ce code.

let el = document.getElementById('id'); let value = el.style['rotate']; // ou let el = document.getElementById('id'); let value = el.style.rotate;

Lire la valeur calculée de rotate en Javascript.

La valeur calculée est toujours définie, ce peut être une valeur affectée explicitement à la propriété, une valeur héritée, ou encore la valeur initiale de la propriété (none dans le cas de rotate).

L'angle de rotation est renvoyé en degrés, quelque soit l'unité utilisée au moment de l'affectation de la propriété.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('rotate');

Modifier la valeur de la propriété rotate avec JQuery.


$('#id').css('rotate', '30grad');


Lire la valeur calculée de la propriété rotate avec JQuery.

Comme en Javascript, l'angle est retourné en degrés, après conversion si nécessaire à partir d'une autre unité.

let value = $('#id').css('rotate');

Tester vous même.

Utilisez les boutons ci-dessous pour appliquer la valeur saisie à la propriété rotate et afficher ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de rotate. On constate que toutes les unités sont converties en degrés.

Simulateur avec la propriété rotate.

Prise en charge de rotate par les navigateurs.

La propriété rotate est maintenant bien reconnue par les navigateurs. La syntaxe utilisant la fonction rotate() avec la propriété transform reste cependant une alternative valable.

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

Propriété
rotate

Estimation de la prise en charge globale.

97%

97%

93%

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

Historique de la propriété rotate.

• Module CSS - Transformations - Niveau 2

  Ajout de la propriété rotate en complément de la propriété plus générale transform.
  

  03 Mars 2020

  Document de travail.

  

  

  

Voir aussi, concernant les transformations.

Le W3C publie les spécifications CSS en modules, chaque module ayant son propre cycle de versions. Le module "Module CSS - Transformations" (ou CSS Transforms Module en anglais) regroupe toutes les définitions concernant les transformations en CSS :

Propriétés :

Fonctions :