Recommandation de cours :

Fonction rotateX() CSS

Définition et utilisation rotateX() CSS

rotateX() La fonction définit la rotation 3D de l'élément autour de l'axe x (direction horizontale). transform Utilisé dans les attributs.

Exemple

Exemple 1

Utilisez rotateX() Tournez plusieurs éléments <div> autour de l'axe x (direction horizontale) :

#myDiv1 {
  transform: rotateX(40deg);
}
#myDiv2 {
  transform: rotateX(60deg);
}
#myDiv3 {
  transform: rotateX(80deg);
}

Essayez-le vous-même

Exemple 2

Utilisez rotateX() Tournez l'image autour de l'axe x (direction horizontale) :

#img1 {
  transform: rotateX(40deg);
}
#img2 {
  transform: rotateX(60deg);
}
#img3 {
  transform: rotateX(80deg);
}

Essayez-le vous-même

Syntaxe CSS

rotateX(angle)
Valeur Description
angle

Obligatoire. Spécifiez l'angle de rotation. Unités possibles :

  • deg (degré)
  • rad (radian)
  • turn (tour)

Détails techniques

Version : Module de transformations CSS niveau 2

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Pages associées

Tutoriel :Transformations 3D CSS

Référence :propriété transform CSS

Référence :Propriété rotate de CSS

Référence :fonction rotate() CSS

Référence :fonction rotate3d() CSS

Référence :fonction rotateY() CSS

Référence :fonction rotateZ() CSS