La propriétérotate permet d'indiquer des rotations individuellement et indépendamment de la propriététransform. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pourtransform.

Syntaxe

/* Valeurs avec un mot-clé */rotate: none;/* Valeur angulaire */rotate: 90deg;rotate: 0.25turn;rotate: 1.57rad;/* Un axe x, y, z et l'angle associé */rotate: x 90deg;rotate: y 0.25turn;rotate: z 1.57rad;/* Un vector et l'angle associé */rotate: 1 1 1 90deg;

Valeurs

Valeur angulaire

Une valeur<angle> qui indique l'angle à utiliser, autour de l'axe Z, pour tourner les éléments. Cela est équivalent à la fonctionrotate().

Le nom de l'axe et l'angle associé

Le nom de l'axe par rapport auquel on souhaite effectuer la rotation ("x", "y" ou "z"), puis une valeur<angle> qui indique l'angle à appliquer pour la rotation. Cela est équivalent à l'une des fonctionsrotateX()/rotateY()/rotateZ().

Un vecteur et l'angle associé

Trois nombres (valeurs<number>) qui représentent une vecteur centré sur l'origine qui définit la ligne autour de laquelle on souhaite faire tourner l'élément puis une valeur<angle> qui indique l'angle de rotation. Cela est équivalent à la fonctionrotate3d().

none

Cette valeur indique qu'aucune rotation ne devrait être appliquée.

Définition formelle

Syntaxe formelle

rotate =
none|
<angle>|
[x|y|z|<number>{3}]&&<angle>

Exemples

HTML

<div>  <p>Rotation</p></div>

CSS

* {  box-sizing: border-box;}html {  font-family: sans-serif;}div {  width: 150px;  margin: 0 auto;}p {  padding: 10px 5px;  border: 3px solid black;  border-radius: 20px;  width: 150px;  font-size: 1.2rem;  text-align: center;}.rotate {  transition: rotate 1s;}div:hover .rotate {  rotate: 1 -0.5 1 180deg;}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• translate
• scale
• transform