Comment créer des conceptions 3D avec la propriété de transformation CSS3

Il existe deux dimensions en ce qui concerne la propriété de transformation CSS3, 2D et 3D. Lors de l'animation, les transformations sont utilisées pour faire passer un élément d'un état à un autre. Ce didacticiel sert d'extension à ce guide sur les animations 2D. Je vais donner un aperçu de la conception 3D et de la façon dont vous pouvez créer des animations impressionnantes en combinant ces concepts de base.

Les transformations 3D peuvent être assez détaillées et peuvent devenir complexes s'il y a beaucoup de pièces différentes combinées, donc commencer par les blocs de construction de base est utile. Certains de ces concepts vous sembleront familiers, mais le « z » est quelque chose qui aura l'air nouveau lorsque vous travaillez en 3D. Les transformations 3D étendent les transformations CSS 2D pour inclure l'axe z, permettant des transformations 3D des éléments DOM.

Qu'est-ce que l'axe Z ?

Il y aura beaucoup de référence à l'axe z. Il est facile de le considérer comme la distance de mesure de quelque chose vers ou loin de vous. S'il s'agit d'une valeur positive, il est plus proche de vous. S'il s'agit d'une valeur négative, il est plus éloigné de vous.

Exemples de transformation 3D

Les propriétés de base de la transformation 3D sont translate3d , scale3d , rotateX , rotateY , rotateZ , perspective et matrix3d ​​. Plus d'arguments sont inclus avec translate3d , scale3d et matrix3d ​​car ils prennent des arguments pour x, y et z. La propriété scale prend une valeur pour un angle et la perspective prend également une valeur unique.

Traduire

translateZ()

Cela définit une translation 3D en utilisant uniquement la valeur de l'axe z. Vous vous souvenez peut-être de traduire x et y à partir de la traduction 2D. L'idée est la même avec translateX() , translateY() et translateZ() car chacun prend une valeur de longueur qui déplace l'élément de la distance spécifiée le long de l'axe correct.

Dans cet exemple, translateZ(-20px) éloignerait l'élément de 20 pixels du visualiseur.

Voici l'extrait de code pour créer cet exemple :

 -webkit-transform: translateZ(-20px); -ms-transform: translateZ(-20px); transform: translateZ(-20px);

translate3d()

La fonction translate3d() permet de déplacer la position de l'élément dans un espace 3D. Cette transformation est créée en spécifiant des coordonnées qui définissent son déplacement dans chaque direction.

La fonction transform: translate3d(20px, -15px, 70px); déplace l'image de 20 pixels le long de l'axe x positif, de 15 pixels sur l'axe y négatif, puis de 70 pixels le long de l'axe z positif.

Voici un exemple de translate3d :

 -webkit-transform: translate3d(20px, -15px, 70px); -ms-transform: translate3d(20px, -15px, 70px); transform: translate3d(20px, -15px, 70px);

Il est assez évident qu'il y a un certain chevauchement du deuxième carré. Cela peut ne pas sembler aussi dramatique que prévu, mais l'ajout de la propriété perspective (plus loin dans ce didacticiel) vous aidera.

Tourner

La fonction rotate3d() fait pivoter l'élément dans l'espace 3D selon l'angle spécifié autour de l'axe. Cela peut être écrit comme rotate(x, y, z, angle) .

rotationX()

Les valeurs de pixel ne fonctionneront pas ici, elles doivent être en degrés. La méthode rotateX() fait pivoter un élément autour de son axe x à un degré donné. Vous voyez comme le rectangle est plus court ? Il est tourné le long de l'axe des x. Cet exemple montre la rotation à 55 degrés.

 -ms-transform: rotateX(55deg); /* IE 9 */ -webkit-transform: rotateX(55deg); /* Safari */ transform: rotateX(55deg);

rotationY()

La méthode rotateY() fait pivoter un élément autour de son axe y. Remarquez que le rectangle du bas n'est pas aussi large que le haut ? Il est tourné de sorte qu'il ne semble pas être aussi large que le rectangle ci-dessus car il est tourné de 60 degrés.

 -ms-transform: rotateY(60deg); /* IE 9 */ -webkit-transform: rotateY(60deg); /* Safari */ transform: rotateY(60deg);

rotationZ()

La méthode rotateZ() fait pivoter un élément autour de son axe z d'un degré spécifié. Dans ce cas, la valeur est de 120 degrés.

 -ms-transform: rotateZ(120deg); /* IE 9 */ -webkit-transform: rotateZ(120deg); /* Safari */ transform: rotateZ(120deg);

rotation3d()

La fonction rotate3d(1, -1, 1, 45deg) fait pivoter l'image le long de l'axe y d'un angle de 45 degrés. Il est important de noter que vous pouvez utiliser des valeurs négatives pour faire pivoter l'élément dans la direction opposée.

Comme c'est plus complexe que les spécifications d'un seul axe, rotate3d peut être décomposé comme ceci : rotate3d(x,y,z,angle) où x=1, y=-1, z=1, et l'angle de rotation = 45 degrés .

Le code pour styliser cela ressemble à :

 -ms-transform: rotate3d(1, -1, 1, 45deg); /* IE 9 */ -webkit-transform: rotate3d(1, -1, 1, 45deg); /* Safari */ transform: rotate3d(1, -1, 1, 45deg);

Tester les bases

Dans le sens des aiguilles d'une montre le long de l'axe x de 45 degrés.

 transform: rotate3d(1, 0, 0, 45deg);

Dans le sens des aiguilles d'une montre le long de l'axe y de 45 degrés.

 transform: rotate3d(0, 1, 0, 45deg);

Dans le sens des aiguilles d'une montre le long de l'axe z de 45 degrés.

 transform: rotate3d(0, 0, 1, 45deg);

Il convient de mentionner qu'en fonction des valeurs spécifiées, une rotation ne sera parfois pas perceptible ; par exemple, cela ne serait pas perceptible : transform: rotate3d(0, 0, 0, 50deg);

Perspective

C'est probablement la transformation la plus « dimensionnelle ». C'est là que vous gagnerez littéralement en perspective. Si vous appliquez des transformations 3D à un élément sans définir la perspective, l'effet résultant n'apparaîtra pas en trois dimensions. C'est quelque chose qui pourrait également être ajouté aux propriétés ci-dessus.

Pour activer l'espace 3D, un élément a besoin de perspective. Cela peut être appliqué de deux manières : en utilisant la propriété transform ou la propriété perspective .

La propriété transform ressemblerait à ceci : transform: perspective(600px); et la propriété perspective ressemblerait à ceci : perspective: 600px; .

Les exemples suivants le changeront entre les deux, alors assurez-vous de regarder attentivement le code.

La valeur de perspective détermine l'intensité de l'effet 3D. Pensez à une valeur faible comme étant vraiment perceptible, comme ce que vous ressentez lorsque vous regardez un gros objet. Lorsqu'il y a une plus grande valeur, l'effet est moins intense.

La position du point de fuite peut également être personnalisée. Cela vaut la peine d'être mentionné et de faire l'objet de nombreuses expérimentations, car il est pertinent pour la perspective CSS. Par défaut, le point de fuite d'un espace 3D est positionné au centre. Utilisez la propriété perspective-origin pour modifier la position du point de fuite. Cela ressemblerait à quelque chose comme : perspective-origin: 15% 55% .

Escalader

échelleZ()

Cela définit une transformation d'échelle 3D en donnant une valeur pour l'axe z. Étant donné qu'il ne met à l'échelle que le long de l'axe z, d'autres fonctions sont nécessaires pour démontrer l'effet de mise à l'échelle. Voyez comment le rectangle est vers le spectateur et comment il montre vraiment la perspective ?

Pour bien comprendre l'échelle (Z), jouez avec la valeur et vous verrez la perspective devenir "plus nette" avec les valeurs les plus grandes.

échelle3d(x,y,z)

La fonction scale3d() modifie la taille d'un élément et s'écrit scale(x, y, z) . Comme scaleZ , il n'est pas évident à quoi ressemble la perspective à moins qu'elle ne soit utilisée avec perspective .

Cet exemple utilise ceci :

 -ms-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* IE 9 */ -webkit-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* Safari */ transform: perspective(500px) scale3d(0.8, 2, 0.2);

Une note rapide : si les trois coordonnées du vecteur sont égales, la mise à l'échelle est uniforme et il n'y aura pas de différence notable.

 transform: scale3d(1, 1, 1); /* unchanged */ transform: scale3d(2, 2, 2); /* twice the original size */

Matrice3d()

La matrice 2D peut prendre 6 valeurs, alors que la matrice 3D en prend 16 (une matrice 4×4) ! Ce serait un très long article si tous les détails étaient couverts, donc si vous voulez explorer davantage ce concept, je recommande fortement cette expérience interactive matrix3d ​​sur Codepen.

Voici les grandes lignes matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)

Comment créer
Animations avec transformations 3D

Maintenant que les bases sont couvertes, la création d'animations interactives est la prochaine étape. À l'aide de transformations et de transitions CSS3, les éléments passent d'un état à un autre par rotation, mise à l'échelle ou ajout de perspective.

Si vous débutez avec les animations CSS, il est important de savoir que sans transition, un élément transformé passerait brusquement d'un état à un autre. Pour éviter cela, une transition peut être ajoutée afin que vous puissiez contrôler le changement, lui donnant un aspect plus fluide.

Comment créer un retournement de carte

Qui n'aime pas jouer aux cartes ? Cet exemple présente une carte double face et vous pouvez voir les deux faces en la retournant avec une transformation. Si vous regardez la balise body , une grande partie de l'effet provient de la propriété perspective . Il est défini sur 500px. Une valeur inférieure comme 100px semble très "asymétrique".

Voici le HTML de départ :

 <div class="wrapper"> div class="side-one"></div> <div class="side-two"></div> </div>

Le CSS est ce qui rend cela possible :

 body { -webkit-perspective: 500px; perspective: 500px; } .wrapper { -webkit-transition: all 1s ease-in; transition: all 1s ease-in; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; margin: 100px auto; width: 250px; height: 250px; cursor: pointer; } .wrapper div { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; border-radius: 10px; background-position: 50% 50%; background-size: 150px; background-repeat: no-repeat; box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4); color: #FFF; text-align: center; text-shadow: 0 1px rgba(0,0,0,.3); } .side-one { z-index: 400; background: #50c6db url(image.png); } .side-two { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); background: #ef4e65 url(image.png); } .wrapper:hover { -webkit-transform: rotateY(-1turn); transform: rotateY(-1turn); }

Cela peut être trouvé sur Codepen.

Si vous débutez avec les transformations, ceci peut vous sembler intéressant : transform: rotate(1turn); Cette unité est parfaite pour notre carte car une unité de "tour" est exactement ce à quoi elle ressemble, c'est-à-dire un cercle complet.

J'ai également utilisé un assouplissement pour créer une méthode de rotation personnalisée. Ceci est accompli avec transition: all 1s ease-in; .

Une autre propriété 3D dans l'extrait est transform-style: preserve-3d; . En incluant cela, cela permet à l'élément de "se balancer" dans l'espace tridimensionnel plutôt que de rester avec l'élément parent.

Comment créer du texte avec un effet 3D

Cet exemple a été inspiré par une vieille affiche de film. Il existe tellement de polices de caractères différentes qui peuvent utiliser un excellent style CSS, de sorte que des effets de type uniques sont certainement possibles. Ce texte utilise rotate3d et transform3d pour lui donner une transformation unique.

Le HTML est assez simple :

 <div class="container"> <div class="text-wrapper"> <div class="text">New York City</div> </div> </div>

Voici le CSS de base :

 .container{ -webkit-perspective: 600; } .text { transform: rotate3d(2, 2, .5, 22deg)translate3d(100px, 0px, 0px); }

Des CSS et des exemples plus détaillés peuvent être trouvés sur Codepen.

Espérons que les transformations CSS 3D apportent une nouvelle dimension à vos conceptions. L'utilisation de la perspective est un excellent moyen de rendre les éléments plus dimensionnels. Combiné avec des transitions, il existe de nombreuses possibilités lors de la création d'animations.