Comment utiliser CSS3 Transformations tridimensionnelles - les nuls

Au fur et à mesure que les navigateurs deviennent plus puissants, de nouvelles fonctionnalités intéressantes pour la programmation HTML5 et CSS3 apparaissent. L'un des développements les plus excitants est la formation de transformations 3D. Une transformation 3D est similaire aux transformations traditionnelles, mais elle permet un troisième axe virtuel.

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

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

Les transformations 3D ont les mêmes opérations générales que 2D (translation, rotation et échelle), mais vous pouvez appliquer la transformation suivant l'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:

• La boîte 1 a un comportement par défaut: La boîte 1 utilise une mise en page ordinaire sans aucune transformation 3D appliquée.

• La boîte 2 est tournée de 45 degrés autour de x: La boîte 2 semble être tronquée, mais elle tourne autour de l'axe horizontal (X). Notez que la boîte elle-même et le texte à l'intérieur de la boîte sont raccourcis.

• La boîte 3 est presque invisible: La boîte 3 a également été tournée autour de l'axe X, mais celle-ci est pivotée de près de 90 degrés, elle est donc presque invisible.

• La boîte 4 est à l'envers: La boîte 4 est tournée de 180 degrés autour de l'axe X, retournant complètement. Notez que tourner autour de l'axe Y retournerait aussi la boîte, mais le texte resterait en haut, et serait inversé le long de l'axe vertical.

• L'encadré 5 fait toutes sortes de choses folles: L'encadré 5 comporte deux transformations appliquées en même temps. Il est pivoté de 45 degrés autour de x et de -45 degrés le long de y.

Regardez le code pour voir exactement ce qui se passe ici.

transform3D. corps html {perspective: 1000; -webkit-perspective: 1000;} # box1, # box2, # box3, # box4, # box5 {largeur: 100px; hauteur: 80px; bordure: 3px noir uni; background-color: yellow;} # box2 {Transformer: rotateX (45deg); -webkit-transform: rotateX (45deg);} # box3 {transforme: rotateX (89deg); -webkit-transform: rotateX (89deg);} # case4 {transformation: rotateX (180deg); -webkit-transform: rotateX (180deg);} # box5 {transforme: rotate3D (1, 2, 0, 45deg); -webkit-transform: rotate3D (1, -1, 0, 45deg);}

3D Transform Demo
boîte 1 boîte 2 boîte 3 boîte 4 boîte 5 < La première nouvelle règle est la perspective.Changez la perspective de l'élément parent qui contiendra vos éléments transformés. Cela vous donne la possibilité de déterminer comment les éléments semblent être affichés. La perspective indique à quel point la caméra semble être proche des éléments.

Les cases 2 à 4 utilisent toutes la même règle de transformation:. Ce mécanisme ressemble beaucoup à la fonction 2D rotate (), mais il tourne le long de l'axe X. Il y a aussi des fonctions rotatey () et rotatez (), mais rotatez () est rarement utilisé car c'est comme la technique 2D rotate ().

Si vous souhaitez appliquer plus d'une rotation, vous pouvez utiliser la fonction rotate 3d (). 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 les fonctions translatex, translatey () et translatez (). Ces mécanismes vous permettent de spécifier une traduction le long d'un axe spécifique La fonction translate3d () vous permet de traduire sur plusieurs axes en même temps.

CSS3 inclut les fonctions scalex, scaley et scalez, mais celles-ci ne sont pas toujours utilisées car elles agissent de manière similaire à la fonction de mise à l'échelle 2D. Il existe également une fonction 3d () à utiliser avec plusieurs échelles.

La prise en charge des transformations 3D est en croissance mais pas complète. Pour le moment, les versions -webkit et no-prefix supporteront la plupart des navigateurs. La famille de navigateurs IE a un support limité pour les transformations 3D.