Transformations 3D avec transition

Reprenons le thème de la page précédente (transformation 3D) mais cette fois la transformation 3D n'est pas instantanée mais bénéficie d'une transition qui dure 2 secondes.

Cliquez sur chaque carte et observez !

Le code CSS de la page

section{ border : 1px solid black ; perspective : 400px ; perspective-origin : center top ;} img {display : inline-block ; margin : 2% ; width :20%; vertical-align : top ; transition : transform 2s; } img.rotation1:active{transform : rotateY(90deg);} img.rotation2:active{transform : rotateX(90deg);}

Ici j'ai utilisé la propriété perspective-origine car je voulais que le point fuite soit situé au milieu de la droite du haut.
Cette propriété a deux valeurs (coordonnées X,Y du point de fuite). Ici les valeurs sont des mots (center et top). Mais comme page fait 900 pixels de large j'aurais pu écrire : 450px 0px ou encore 50% 0%.

La valeur de la propriété perspective est 400px (800px pour la page précédente). Vous pouvez noter que la déformation de l'objet soumis à la transformation est beaucoup plus grande que dans la page précédente.

Pour que la transformation ne soit pas instantanée mais progressive j'ai ajouté dans la règle de style relative à la balise img la propriété transition : transform 2s; .

Le code HTML de la page

Il est strictement identique à celui de la page précédente.
Retour menu