Comme les navigateurs deviennent plus puissants, de nouvelles fonctionnalités intéressantes pour HTML5 et CSS3 programmation émergent. Un des développements les plus passionnants est la formation de transformations 3D. Une transformation 3D est similaire aux transformations traditionnelles, mais il permet pour un troisième axe virtuel.

, Des animations 2D ordinaires utilisent le système de coordonnées 2D, avec un axe X d'un côté à côté allant et un axe Y traversant de haut en bas. Même dans les transformations 2D, il est une reconnaissance tacite d'un axe Z. L'axe Z passe par le centre de l'objet et pointe directement vers les yeux du spectateur et à l'arrière à l'infini derrière l'écran. Rotations 2D sont autour de cet axe Z imaginaire.

Vous pouvez déterminer quels éléments se chevauchent d'autres éléments par la propriété CSS, si bien que tous les éléments de l'écran sont à la même distance réelle de l'utilisateur, ils semblent avoir une certaine forme de profondeur.

Transformations 3D ont les mêmes opérations générales en 2D (translation, rotation, et l'échelle), mais vous pouvez appliquer la transformation le long d'un des trois axes: X, Y, ou Z.

Vous voyez cinq boîtes avec des styles presque identiques. Chaque boîte a une transformation 3D différente appliquée:

• Encadré 1 a un comportement par défaut: Encadré 1 utilise la mise en page ordinaire avec aucune transformation 3D appliquée à tous.

• 
  
  
  
  

  Box 2 est une rotation de 45 degrés autour de x: Encadré 2 semble être tronqué, mais il est en fait tourné autour de l'axe (X) horizontale. Notez que la fois la boîte elle-même et le texte à l'intérieur de la boîte sont raccourcis.

• Encadré 3 est presque invisible: Encadré 3 a également été tourné autour de l'axe X, mais celui-ci est tourné près de 90 degrés, il est donc presque invisible.

• Box 4 est à l'envers: Box 4 est tourné de 180 degrés autour de l'axe X, renversant complètement. Notez que la rotation autour de l'axe Y aurait également retourner la boîte, mais le texte resterait en haut, et serait inversé le long de l'axe vertical.

• Box 5 est en train de faire toutes sortes de choses folles: Box 5 a deux transformations appliquées au même moment. Il est mis en rotation de 45 degrés autour de x et y le long de -45 degrés.

Jetez un oeil sur le code pour voir exactement ce qui se passe ici.

Transformation 3D Demo
case 1
case 2
case 3
case 4
la case 5

La première nouvelle règle est perspective. Changer la perspective de l'élément parent qui contiendra vos éléments transformés. Cela vous donne la possibilité de déterminer la façon dont les éléments semblent être affichée. La perspective indique la proximité de la caméra semble être aux éléments.

Boîtes 2 à 4 utilisent tous la même règle de transformation:. Ce mécanisme est un peu comme la 2D rotate ()fonction, mais il tourne le long de l'axe X. Il y a aussi rotatey ()et rotatez () fonctions, mais rotatez ()est rarement utilisé car il est juste comme la 2D rotate ()technique.

Si vous voulez appliquer plus d'une rotation, vous pouvez utiliser la rotation 3D () fonction. Cette fonction prend quatre paramètres. Les trois premiers sont des modificateurs pour les trois axes, et le quatrième est un angle.

CSS3 prend également en charge la translatex, translatey (), et translatez () fonctions. Ces mécanismes permettent de spécifier une translation le long d'un axe spécifique Le translate3d () fonction vous permet de traduire le long de plusieurs axes en même temps.

CSS3 comprend scaleX, scaley, et scalez fonctions, mais encore ils ne sont pas toujours utilisés car ils agissent similaire à la fonction de mise à l'échelle 2D. Il existe également un 3d échelle () fonction pour une utilisation avec de multiples échelles.

Support pour les transformations 3D est en croissance, mais pas complète. À l'heure actuelle, la -webkit et aucun préfixe-versions seront soutenir la plupart des navigateurs. La famille de navigateurs IE a un support limité pour les transformations 3D.