Transformations 3D avec transitions
Survolez chaque image 5 secondes, le temps de la transition !
Exemple 1
Si survol d'une image de la colonne de gauche, elle monte, diminue de taille et bascule.
Si survol d'une image de la colonne du milieu, elle va à droite, descend et subit une rotation mais la taille ne change pas.
Si survol d'une image de la colonne de droite, elle monte, diminue un peu de taille, pivote complètement et l'on voit l'image inversée
(comme le reflet de celle-ci dans un miroir).
Le code HTML correspondant
Les images sont contenues dans la boite ARTICLE qui est une boite 3D (propriété perspective.
Ici j'ai utilisé la propriété perspective-origin car je voulais que le point fuite soit situé au milieu du haut et non pas au centre de la boite 3D.
Notez qu'à chaque image sont associées deux classes :une pour gérer la taille de l'image et une pour gérer la transformation 3D dès le survol.
Le code CSS
img.petite {display : inline-block ; margin : 1% ; width :30%;
vertical-align : top ; transition : transform 5s; }
img.gauche:hover{transform : translate3d(0,-600px,-600px) rotateX(45deg);}
img.centre:hover{transform : translate3d(300px,300px,0) rotateZ(-45deg); }
img.droite:hover{transform : translateZ(-300px) rotateY(180deg);}
On peut remplacer translateX, translateY, translateZ par translate3d(x,y,z); x ou y ou z peut être égal à zéro.
Il existe aussi la commande scale3d(x,y,z) qui remplace scaleX(nombre), scaleY(nombre), scaleZ(nombre).
Mais, comme vous l'aves constaté le simple faite de translater l'objet sur l'axe Z augmente ou réduit sa taille !
Exemple2
Dans ce deuxième exemple, je reviens sur les rotations dans le cadre d'une zone 3D et j'introduit une nouvelle propriété CSS backface-visibility qui est utile dans le cadre des rotations 3D.
Survolez 5 secondes chaque carte, le temps de la transition !
Sur clic, une carte de la première rangée pivote de 180 degrés (rotationY) puis la carte devient invisible ...
Sur clic une carte de la deuxième rangée bascule de 180 degrés (rotationX) et alors la carte apparait inversée, tel son reflet dans un miroir.
Sur clic une carte de la troisième rangée se retourne de 180 degrés (rotationZ).
Le code HTML
Notez qu'à chaque carte est associée deux classes.
Le code CSS
...
img.petite {display : inline-block ; margin : 1% ; width :30%; vertical-align : top ;
transition : transform 5s; }
...
img.carte1:active{transform : rotateY(180deg); backface-visibility : hidden; }
img.carte2:active{transform : rotateX(180deg); }
img.carte3:active{transform : rotateZ(180deg); }
...
Notez l'apparition d'une nouvelle propriété CSS : backface-visibility. La valeur par défaut de cette propriété est "visible".
Aussi n'est-elle pas mentionnée dans la définition de la classe "carte2" donc l'image peut apparaitre à l'envers.
Effet "card flip" ou retourné de carte
Exemple
Clique sur ma photo et tu me verras nue !
Vieux cochon !
Un exemple coquin pour un problème très sérieux. Si survol de la photo initiale, une nouvelle photo apparait.
Le code HTML
L'élément .zone3d sert d'environnement 3D. pour l'objet div class ="carte" qui contient à son tour deux éléments : les div affectés
des classes ".recto" et ".verso".
Chaque enfant de "carte" a pour "background" une image.
Le code CSS
.zone3d {width: 300px; height: 400px; perspective: 1000px;}
.carte {position: relative; width: 100%; height: 100%; transition: transform 2s;
transform-style: preserve-3d;}
.zone3d:active .carte{transform: rotateY(180deg);}
.recto, .verso {position: absolute; width: 100%; height: 100%;
backface-visibility: hidden;}
.verso {transform: rotateY(180deg);}
Notez l'emploi de la commande transform-style: preserve-3d dans la règle de style concernant l'élément "carte".
En effet la perpective du conteneur ("zone3d") ne profite par défaut qu'aux
enfants (descendants directs). Donc pour que les enfants de "carte" soient aussi 3D il faut propager la 3D avec cette commande.
Grâce à position : absolute les éléments "recto" et "verso" se superposent parfaitement telles les deux faces de la même carte.