Transformations 3D CSS
Transformations 3D CSS
CSS prend également en charge les transformations 3D.
Passez la souris sur les éléments ci-dessous pour voir la différence entre une transformation 2D et 3D :
Dans ce chapitre, vous découvrirez la propriété CSS suivante :
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| transformer | 36,0 | 10.0 | 16.0 | 9.0 | 23,0 |
Méthodes de transformation CSS 3D
Avec le CSS transform propriété, vous pouvez utiliser les méthodes de transformation 3D suivantes :
rotateX()rotateY()rotateZ()
La méthode rotateX()
Le rotateX() La méthode fait pivoter un élément autour de son axe X à un degré donné :
La méthode rotateY()
Le rotateY() La méthode fait pivoter un élément autour de son axe Y à un degré donné :
La méthode rotateZ()
Le rotateZ() La méthode fait pivoter un élément autour de son axe Z à un degré donné :
Propriétés de transformation CSS
Le tableau suivant répertorie toutes les propriétés de transformation 3D :
| Propriété | Description |
|---|---|
| transformer | Applique une transformation 2D ou 3D à un élément |
| transformer-origine | Permet de changer la position sur les éléments transformés |
| style de transformation | Spécifie comment les éléments imbriqués sont rendus dans l’espace 3D |
| perspective | Spécifie la perspective sur la façon dont les éléments 3D sont visualisés |
| perspective-origine | 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 n’est pas face à l’écran |
Méthodes de transformation CSS 3D
| Fonction | Description |
|---|---|
| matrice3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Définit une transformation 3D, en utilisant une matrice 4×4 de 16 valeurs |
| translate3d(x, y, z) | Définit une translation 3D |
| traduireX(X) | Définit une translation 3D, en utilisant uniquement la valeur de l’axe X |
| traduireY(y) | Définit une translation 3D, en utilisant uniquement la valeur de l’axe Y |
| traduireZ(z) | Définit une translation 3D, en utilisant uniquement la valeur de l’axe Z |
| échelle3d(x, y, z) | Définit une transformation d’échelle 3D |
| échelleX(X) | Définit une transformation d’échelle 3D en donnant une valeur pour l’axe X |
| échelleY(y) | Définit une transformation d’échelle 3D en donnant une valeur pour l’axe Y |
| échelleZ(z) | Définit une transformation d’échelle 3D en donnant une valeur pour l’axe Z |
| rotation3d(x, y, z, angle) | Définit une rotation 3D |
| rotationX(angle) | Définit une rotation 3D le long de l’axe X |
| rotationY(angle) | Définit une rotation 3D le long de l’axe Y |
| rotationZ(angle) | Définit une rotation 3D le long de l’axe Z |
| perspective(n) | Définit une vue en perspective pour un élément transformé en 3D |
#Transformations #CSS