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

... <section style ="border : 1px solid black ; perspective : 600px ; perspective-origin : center top ;"> <img src ='../images/jolie_fille.jpg' class ="petite gauche"> <img src ='../images/brune_nue.jpg' class=" petite centre" > <img src ='../images/seins_nus.jpg' class ="petite droite" > <br><img src ='../images/black_nue.jpg' class ="petite gauche" > <img src ='../images/trikini.jpg' class ="petite centre" > <img src ='../images/bikini.jpg' class ="petite droite" > </section> ...

Les images sont contenues dans la boite section 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

<section style ="border : 1px solid black ; perspective : 400px ;"> <img src="../images/as_coeur.jpg" class ="petite carte1"/> <img src="../images/as_carreau.jpg" class ="petite carte1" /> <img src="../images/as_trefle.jpg" class ="petite carte1"/> <br> <img src="../images/roi_coeur.jpg" class ="petite carte2"/> <img src="../images/roi_carreau.jpg" class ="petite carte2" /> <img src="../images/roi_trefle.jpg" class ="petite carte2" /> <br> <img src="../images/as_pique.jpg" class ="petite carte3"/> <img src="../images/roi_pique.jpg" class ="petite carte3"/> </section>

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

<div class="zone3d"> <div class="carte"> <div class="recto" style ="background : url(../images/bikini.jpg);background-size : cover;" > </div> <div class="verso" style ="background : url(../images/burkini.jpg); background-size : cover;" ><h3> Vieux cochon ! </h3> </div> </div> </div>

L'élément .zone3d sert d'environnement 3D. pour l'objet .carte qui contient à son tour deux éléments .recto .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.
Retour menu