CSS Transformations 3D
Transformations 3D CSS
La propriété CSS transform applique une transformation 2D ou 3D à un élément. Cette propriété vous permet de faire pivoter, redimensionner, déplacer et incliner des éléments.
Survolez les éléments ci-dessous pour voir la différence entre une transformation 2D et une transformation 3D :
rotation 2D
rotation 3D
Fonctions de Transformations 3D CSS
Avec la propriété CSS transform , vous pouvez utiliser les fonctions de transformation 3D suivantes :
La Fonction CSS rotateX()
La fonction rotateX() fait pivoter un élément autour de son axe X d'un angle donné :
Exemple
#myDiv {
transform: rotateX(150deg);
} La Fonction CSS rotateY()
La fonction rotateY() fait pivoter un élément autour de son axe Y d'un angle donné :
Exemple
#myDiv {
transform: rotateY(150deg);
} La Fonction CSS rotateZ()
La fonction rotateZ() fait pivoter un élément autour de son axe Z d'un angle donné :
Exemple
#myDiv {
transform: rotateZ(90deg);
} Propriétés de Transformation CSS
Le tableau suivant répertorie toutes les propriétés de transformation 3D :
| Propriété | Description |
|---|---|
| transform | Applique une transformation 2D ou 3D à un élément |
| transform-origin | Vous permet de changer la position des éléments transformés |
| transform-style | Spécifie comment les éléments imbriqués sont rendus dans l'espace 3D |
| perspective | Spécifie la perspective de visualisation des éléments 3D |
| perspective-origin | Spécifie la position inférieure des éléments 3D |
| backface-visibility | Définit si un élément doit être visible ou non lorsqu'il ne fait pas face à l'écran |
Fonctions de Transformation 3D CSS
| Fonction | Description |
|---|---|
| matrix3d() | Définit une transformation 3D, en utilisant une matrice 4x4 de 16 valeurs |
| translate3d() | Définit une translation 3D |
| translateZ() | Définit une translation 3D, en utilisant uniquement la valeur pour l'axe Z |
| scale3d() | Définit une transformation de mise à l'échelle 3D |
| scaleZ() | Définit une transformation de mise à l'échelle 3D en spécifiant une valeur pour l'axe Z |
| rotate3d() | Définit une rotation 3D |
| rotateX() | Définit une rotation 3D le long de l'axe X |
| rotateY() | Définit une rotation 3D le long de l'axe Y |
| rotateZ() | Définit une rotation 3D le long de l'axe Z |
| perspective() | Définit une vue de perspective pour un élément transformé en 3D |