Transformations 3D CSS

Transformations 3D CSS

CSS prend également en charge les transformations 3D.

Placez le curseur sur les éléments ci-dessous pour voir la différence entre les transformations 2D et 3D :

rotation 2D
rotation 3D

Dans ce chapitre, vous apprendrez les propriétés CSS suivantes :

  • transform

Support du navigateur

Les nombres dans le tableau indiquent la version la plus ancienne du navigateur qui prend en charge cette propriété.

Attribut Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

Méthode de transformation 3D CSS

par CSS transform Attribut, vous pouvez utiliser les méthodes de transformation 3D suivantes :

  • rotateX()
  • rotateY()
  • rotateZ()

Méthode rotateX()

Tourner X

rotateX() Méthode permettant de faire tourner un élément autour de son axe X d'un angle donné :

Exemple

#myDiv {
  transform: rotateX(150deg);
}

Essayez-le vous-même

Méthode rotateY()

Tourner Y

rotateY() Méthode permettant de faire tourner un élément autour de son axe Y d'un angle donné :

Exemple

#myDiv {
  transform: rotateY(130deg);
}

Essayez-le vous-même

Méthode rotateZ()

rotateZ() Méthode permettant de faire tourner un élément autour de son axe Z d'un angle donné :

Exemple

#myDiv {
  transform: rotateZ(90deg);
}

Essayez-le vous-même

Attributs de transformation CSS

Le tableau suivant liste tous les attributs de transformation 3D :

Attribut Description
transform Appliquer une transformation 2D ou 3D à l'élément.
transform-origin Permettre de changer la position de l'élément transformé.
transform-style Définir comment les éléments imbriqués s'affichent dans l'espace 3D.
perspective Définir l'effet de perspective de l'élément 3D.
perspective-origin Définir la position du bas de l'élément 3D.
backface-visibility Définir si l'élément est visible lorsqu'il ne fait pas face à l'écran.

Méthode de transformation 3D CSS

Fonction Description
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 Définir une transformation 3D, en utilisant une matrice 4x4 de 16 valeurs.
translate3d(x,y,z) Définir une transformation de rotation 3D.
translateX(x) Définir une transformation de rotation 3D, en utilisant uniquement les valeurs pour l'axe X.
translateY(y) Définir une transformation de rotation 3D, en utilisant uniquement les valeurs pour l'axe Y.
translateZ(z) Définir une transformation de rotation 3D, en utilisant uniquement les valeurs pour l'axe Z.
scale3d(x,y,z) Définir une transformation de zoom 3D.
scaleX(x) Définir une transformation de zoom 3D, en fournissant une valeur pour l'axe X.
scaleY(y) Définir une transformation de zoom 3D, en fournissant une valeur pour l'axe Y.
scaleZ(z) Définir une transformation de zoom 3D, en fournissant une valeur pour l'axe Z.
rotate3d(x,y,z,angle) Définir une rotation 3D.
rotateX(angle) Définir une rotation 3D le long de l'axe X.
rotateY(angle) Définir une rotation 3D le long de l'axe Y.
rotateZ(angle) Définir une rotation 3D le long de l'axe Z.
perspective(n) Définir la vue de perspective 3D de l'élément de transformation 3D.