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) et rotateZ(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.