Les transformations 3D sont basées sur la même propriété que les transformations 2D, à savoir transform
.
En revanche, de nouvelles fonctions de transformations sont disponibles :
-
rotateX(angle)
,rotateY(angle)
etrotateZ(angle)
pour des rotations autour de chaque axe. -
rotate3d(x,y,z,angle)
pour une rotation autour du vecteur 3D x,y,z. -
translateZ(z)
pour des translations sur l’axe Z (profondeur). -
translate3d(x,y,z)
pour des translations en 3D. -
scaleZ(z)
pour des changements d’échelle sur l’axe Z -
scale3d(x,y,z)
pour des changements d’échelle en 3D. -
matrix3d()
spécifie une matrice de transformation 4x4.
Néanmoins, de nouvelles propriétés existent pour gérer cet affichage en 3D :
-
perspective
représente la distance entre la caméra et la scène (l’internaute et l’écran). Sans perspective, l’impression de 3D n’existe pas. -
perspective-origin
pour l’origine de la perspective (Là où les points de fuite des éléments se rejoignent). -
transform-style: flat|preserve-3d
défini si les éléments inclus subissent les transformations en 3D. -
backface-visibility: visible|hidden
spécifie si les faces arrières des éléments sont visibles ou non.
Pour aller plus loin, lisez l’article/tutoriel sur les transformations 3D que j’ai écrit sur html5-css3.fr
Note :
- IE10, Firefox 16 et Opera 12.1 supportent les propriétés non-préfixées.
- Attention toutefois, IE10 ne reconnait toujours pas
preserve-3d
, vous pouvez apprendre comment faire en sorte que les transformations 3D fonctionnent sur IE10 via mon blog.