Propriété rotate de CSS

Page précédente Droite
Page suivante row-gap

Définition et utilisation

rotate L'attribut permet de faire pivoter l'élément.

rotate L'attribut définit une valeur qui représente l'ampleur de rotation de l'élément autour de l'axe z dans le sens horaire. Pour faire pivoter l'élément autour de l'axe x, de l'axe y ou d'une autre manière, une définition correspondante doit être faite.

rotate La valeur de l'attribut peut être un angle, un nom d'axe + angle ou trois valeurs + angle.

Si un seul angle est donné, l'élément tourne autour de l'axe z dans le sens horaire.
Si un nom d'axe et un angle sont donnés, l'élément tourne autour de l'axe spécifié dans le sens horaire.
Si trois valeurs et un angle sont donnés, ces trois valeurs définissent un vecteur, autour duquel l'élément va tourner.

Pour mieux comprendre rotate l'attribut, voirDémonstration.

Remarque :Une autre technique pour faire pivoter un élément est d'utiliser Fonction rotate() de CSS de l'attribut CSS transform.

Exemple

Exemple 1

Modifier la rotation de l'élément :

div {
  rotate: 30deg;
}

Essayez-le vous-même

Exemple 2

Lorsque rotate Lorsque l'attribut est réglé sur un vecteur et un angle, l'élément tourne autour du vecteur.

Ici, le vecteur est [1 1 0] dans le plan deux dimensions, avec des coordonnées x et y, puis il tourne de 60 degrés :

div {
  rotate: 1 1 0 60deg;
}

Essayez-le vous-même

Syntaxe CSS

rotate: axe angle|initial|inherit;

Valeur de l'attribut

Valeur	Description
axe	Optionnel. Si non spécifié, la valeur par défaut est l'axe z. Définit l'axe autour duquel l'élément va tourner. Valeurs possibles : x y z
angle	Définit l'ampleur de rotation de l'élément. Unités possibles : deg（degrés） rad（radianes） tour（tour(s)）
angle vectoriel	Ces trois nombres définissent un vecteur, autour duquel l'élément va tourner. Ces trois nombres représentent les coordonnées x, y et z du vecteur. La dernière valeur est l'angle de rotation. Valeurs possibles : number number number angle
initial	Réinitialise cette propriété à sa valeur par défaut. Voir initial.
inherit	Inherited from its parent element. Voir inherit.

Détails techniques

Valeur par défaut :	none
Héritabilité :	Non
Création d'animation :	Supporté. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.rotate="-120deg"