rotate - Propriété CSS
Résumé des caractéristiques de la propriété rotate
none
none
rotate
passe progressivement d'une valeur à une autre.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.
rotate:15deg x;
15 degrés suivant l'axe X
rotate:15deg y;
15 degrés suivant l'axe Y
rotate:10deg z;
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.
X
X
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.
;
- 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 fonctionperspective()
.
rotate:10deg x
Rotation autour de l'axe X
Syntaxe équivalent àtransform:rotateX(10deg);
rotate:10deg y
Rotation autour de l'axe Y
Syntaxe équivalent àtransform:rotateY(10deg);
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.
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.
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
).
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.
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.
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()
.
rotate
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.