Recommandation de cours :

Fonction CSS rotate3d()

Définition et utilisation rotate3d() CSS

rotate3d() La fonction définit la rotation 3D de l'élément. transform Utilisé dans les attributs.

Exemple

Exemple 1

Utiliser rotate3d() Rotation de plusieurs éléments <div> :

#myDiv1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#myDiv2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#myDiv3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

Essayer par vous-même

Exemple 2

Utiliser rotate3d() Rotation de l'image :

#img1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#img2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#img3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

Essayer par vous-même

Syntaxe CSS

rotate3d(x, y, z, angle)
Valeur Description
x Nombre positif ou négatif, définissant la rotation autour de l'axe x.
y Nombre positif ou négatif, définissant la rotation autour de l'axe y.
z Nombre positif ou négatif, définissant la rotation autour de l'axe z.
angle

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

  • deg (degré)
  • rad (rayon)
  • tour (cercle)

Détails techniques

Version : Module CSS Transforms Niveau 2

Prise en charge 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 :Transformation 3D CSS

Référence :Attribut transform CSS

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

Référence :Fonction rotate() CSS

Référence :Fonction rotateX() CSS

Référence :Fonction rotateY() CSS

Référence :Fonction rotateZ() CSS