Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

rotate - Propriété CSS

rotate

Résumé des caractéristiques de la propriété rotate

Description rapide
Définit une rotation de l'élément.
Statut
Standard
Valeurs prédéfinies
none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété rotate passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Transformations
Références (W3C)
Statut du document:: WD (document de travail)

Description de la propriété rotate.

Cette propriété est encore mal prise en charge par les navigateurs (2022) : on préférera utiliser la propriété transform avec la fonction 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.

Les axes et sens de rotation

rotate:15deg x;
Un élément tourné de
15 degrés suivant l'axe X
rotate:15deg y;
Un élément tourné de
15 degrés suivant l'axe Y
rotate:10deg z;
Un élément tourné de
10 degrés suivant l'axe Z

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.

Pas de rotation
Pas de rotation
Rotation autour de X
Une rotation autour de l'axe X sans effet de perspective
Rotation autour de X
Une rotation autour de l'axe X avec effet de perspective

Syntaxes pour rotate.

angle est une valeur angulaire indiquant l'angle de rotation.
a b c sont trois valeurs permettant de définir un axe de rotation non orthogonal.

 none none angle angle a b c angle a b c angle x x y y z z angle angle
;
  • 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 angulairies (voir les unités CSS 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 visible que si un effet de perspective a été appliqué. Voir à ce sujet la propriété perspective ou la fonction perspective().

    Rotation suivant l'axe X
    rotate:10deg x
    Rotation autour de l'axe X
    Syntaxe équivalent à
    transform:rotateX(10deg);
    Rotation suivant l'axe Y
    rotate:10deg y
    Rotation autour de l'axe Y
    Syntaxe équivalent à
    transform:rotateY(10deg);
    Rotation suivant l'axe Z
    rotate:10deg z
    Rotation autour de l'axe Z
    Syntaxe équivalent à
    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.

    Rotation suivant un axe intermédiaire

  • rotate: initial; rotate: inherit; rotate: revert; rotate: revert-layer; rotate: unset;

    La valeur initiale est : none.

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.

Si ces animations de fonctionnent pas c'est probablement parce que votre navigateur ne reconnaît pas la propriété rotate. A l'heure actuelle (2022) il n'y a que Firefox qui montre le résultat correctement.

1
2

Manipulation de la propriété rotate par programme.

Le bloc bleu ci-dessous servira d'exemple pour les codes proposés. La modification de la valeur de rotate est immédiatement retranscrite à l'affichage. Pour que les rotations en 3D (autour des axes X ou Y) soient visibles, un effet de perspective a été mis en place (voir la propriété perspective).

Résultat

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.


function setRotate(el) {
el.style['rotate']='30grad';
// ou
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.


function getRotate(el) {
alert(el.style['rotate']);
// ou
alert(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é.


function getCalcRotate(el) {
alert(window.getComputedStyle(el).getPropertyValue('rotate'));
}

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


function setRotate(el) {
$(el).css('rotate','0.25rad x');
}

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é.


function getCalcRotate(el) {
return $(el).css('rotate');
}

Simulateur.

rotate :
Démonstration

Prise en charge par les navigateurs (compatibilité).

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.

Colonne 1
Prise en charge des transformations 2D (dans le plan de l'écran).
Colonne 2
Prise en charge des transformations 3D (pouvant sortir du plan de l'écran).
Colonne 3
Support de la propriété rotate. Ne confondez pas avec la fonction rotate() même si son rôle est assez semblable à celui de la propriété rotate dont il est question ici. Voir la fonction rotate().
1
2D transformations
2
3D transformations
3
rotate
Estimation de la prise en charge en pourcentage du parc actuel.
98%
97%
86%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que rotate.

Les spécifications CSS éditées par le W3C sont organisées en modules. rotate fait partie du Module CSS - Transformations (CSS Transforms Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Visibilité de la face arrière de l'élément (pendant sa rotation).
Effet de perspective appliqué à un élément ayant subi une transformation 3D.
Position de l'observateur dans le cas d'une déformation 3D avec perspective.
Définit un mise à l'échelle de l'élément (agrandissement ou réduction).
Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).
Définit la boîte de référence pour les transformations.
Point d'origine pour les transformations.
Rendu des éléments soumis à une transformation 3D.
Définit une translation de l'élément (un déplacement).
Définit un agrandissement ou une réduction de l'élément.

Fonctions.

Applique une transformation composite à un élément (translations, rotations...)
Applique une série de transformations 3D à un élément.
Définit la hauteur de l'observateur dans le cas d'une transformation 3D.
Définit une rotation de l'élément en 2D (dans le plan de l'écran).
Définit une rotation 3D de l'élément autour d'un axe quelconque en 3D.
Définit une rotation de l'élément autour de l'axe X (en 3D),
Définit une rotation 3D de l'élément autour de l'axe Y.
Définit une rotation de l'élément autour de l'axe Z.
Définit un agrandissement ou une réduction de l'élément.
Définit une mise à l'échelle en 3D.
Définit une mise à l'échelle suivant l'axe X.
Définit une mise à l'échelle suivant l'axe Y.
Définit une mise à l'échelle suivant l'axe Z.
Définit une inclinaison de l'élément suivant les axes X et/ou Y.
Définit une inclinaison de l'élément suivant l'axe X.
Définit une inclinaison de l'élément suivant l'axe Y.
Applique une translation (un déplacement ) à un élément.
Définit une translation en 3D suivant un ou plusieurs des axes X,Y et Z.
Définit une translation suivant l'axe X (horizontalement).
Définit une translation suivant l'axe Y (verticalement).
Définit une translation suivant l'axe Z (perpendiculaire à l'écran).