Transformations 3D avec transitions

Survolez successivement chaque image 5 secondes, le temps de la transition !

Exemple 1

Si survol d'une image de la colonne de gauche, celle-ci grandit et bascule complètement, l'image apparait à l'envers.
Si survol d'une image de la colonne du milieu, celle-ci se reduit et pivote vers la droite.
Si survol d'une image de la colonne de droite, celle-ci grandit et pivote complèment, l'image apparait tel son reflet dans un miroir.

Le code HTML correspondant

...
<article 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/bikini.jpg' class ="petite centre" >
	<img src ='../images/trikini.jpg' class ="petite droite" >
</article>
...

Notez bien qu'à chaque image est affecté deux classes : classe "petite" et classe "gauche" ou "centre" ou "droite".

Le code CSS

img.petite {display : inline-block ; margin : 1% ; width :30%; 
	vertical-align : top ; transition : transform 5s; }
img.gauche:hover{transform : translateZ(200px) rotateX(180deg);}
img.centre:hover{transform : translateZ(-200px) rotateZ(45deg); }
img.droite:hover{transform : translateZ(200px) rotateY(180deg);}

La classe "petite" définit la mise en forme avant transformation.

La transformation (avec transition) ne s'applique qu'en cas de survol de l'image.

Exemple 2

Dans ce deuxième exemple 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 !

Si survol sur une carte de la rangée du haut, celle-ci bascule de 180 degrés (rotationX) puis disparait.
Si survol sur une carte de la rangée du bas, celle-ci pivote de 180 degrés (rotationY) et alors la carte apparait inversée, tel son reflet dans un miroir.

Le code HTML

<article style ="border : 1px solid black ; perspective : 400px ;">
	<img src="../images/as_coeur.jpg"  class ="petite haut"/>
	<img src="../images/as_carreau.jpg" class ="petite haut" />
	<img src="../images/as_trefle.jpg"  class ="petite haut"/>
	<br>
	<img src="../images/roi_coeur.jpg" class ="petite bas"/>
	<img src="../images/roi_carreau.jpg" class ="petite bas" />
	<img src="../images/roi_trefle.jpg" class ="petite bas" />
</article>

Par défaut le point de fuite est le milieu de la zone 3D si la propriété perspective-origine n'est pas renseignée.
Notez qu'à chaque carte est associée deux classes : la classe "petite" et la classe "haut" ou "bas".

Le code CSS

...
img.petite {display : inline-block ; margin : 1% ; width :30%; 
	vertical-align : top ; transition : transform 5s; }
img.haut:hover{transform : rotateX(180deg); backface-visibility : hidden; }
img.bas:hover{transform : rotateY(180deg); backface-visibility : visible; }
...

Emploi de la propriété CSS backface-visibility. La valeur par défaut de cette propriété est "visible".
La transformation ne s'applique qu'en cas de survol de l'imag.

Appliquer une transformation 3D à une collection d'éléments

Il suffit via un script d'appliquer une nouvelle classe à cette collection ; classe qui prévoit une transformation 3D avec transition ; c'est plus "fun" qu'une tansformation instantanée.
Attention la transformation ne doit pas s'appliquer à toutes les images de la page mais seulement celles qui sont contenues dans la boite 3D.

Le code de la page

Ci-dessous code CSS, HTML & JS : <style> img {display : inline-block ; margin : 5% ; width : 20%; height : 150px ; object-fit: contain; ; border : 1px solid red; } .transformer {transform : translateZ(200px) rotateY(180deg); transition : transform 5s; } ... <body> <br><img src="../images/as_coeur.jpg"/> ... <img src="../images/as_pique.jpg"/> <article style ="border : 1px solid black ; perspective : 600px ; perspective-origin : center top ;"> <img src ='../images/jolie_fille.jpg'> ... <img src ='../images/trikini.jpg'> </article> <button>Transformer les images de la zone 3D</button> <script> document.querySelector("button").onclick = function() { let transformables = document.querySelectorAll("article img"); for (let i in transformables) { transformables[i].classList.toggle("transformer"); } } // fin fonction

Observez la règle de style qui s'applique aux images ! Toutes les images doivent être affichées dans une zone de 18% par 150px avec une bordure rouge.
Or elles n'ont pas toutes le même ratio largeur/hauteur. Il faut donc utiliser la propriété object-fit pour qu'il n'y ait pas déformation de l'image. Si la valeur de cette propriété vaut "contain" il n'y aura pas rognage mais toute la largeur ne sera pas forcément occupée.
la propriété object-fit est l'équivalent pour les éléments IMG, de la propriété background-size pour les éléments DIV.

Notez la classe "transformer" qui prévoit une transformation 3D avec transition.

Cette classe est appliquée à toutes les images de la zone 3D via le script.
"transformables" est un tableau indicé qui ne référence que les images dans la zone ARTICLE (à l'exclusion des autres).
Rappel : la méthode document.querySelectorAll() est argumentée avec un sélecteur CSS.

La boite définie par la balise ARTICLE est une zone 3D : avec une perspective et un point de fuite.

Le rendu

Notez bien que les images ont toutes la même hauteur mais pas la même largeur (bandes blanches entre image et bordure plus ou moins larges).
Elles ne sont pas rognées ; ce qui aurait êté le cas éventuellement avec object-fit : cover

Effet "card flip" ou retourné de carte

Exemple

Survole 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

<article 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>
</article>

L'élément .zone3d sert d'environnement 3D. pour l'objet div class ="carte" qui contient à son tour deux éléments : les DIV classés "recto" et "verso".
Ces deux enfants de "carte" ont pour "background" une image.
background-size : cover : l'image de fond occupe toute la boite sans déformation de l'image mais au prix d'un éventuel rognage.

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:hover .carte{transform: rotateY(180deg);}
.recto, .verso {position: absolute;  width: 100%;  height: 100%;  
		backface-visibility: hidden;}
.verso {transform: rotateY(180deg);}

Notez l'emploi de la propriété transform-style avec la valeur "preserve-3d" dans la règle de style concernant l'élément "carte". Ainsi les "enfants" de l'élément "carte" sont aussi positionnés en 3D.

Grâce à position : absolute les éléments "recto" et "verso" se superposent parfaitement telles les deux faces de la même carte.

Traduction

Tutoriel CSS - sommaire

Révisions CSS2

Nouveautés CSS3

Nouveautés CSS3 - suite

Transformations, transitions & animations

Tutoriel CSS3 - recherche

L'auteur : Patrick Darcheville

Transformations 3D avec transitions

Exemple 1

Le code HTML correspondant

Le code CSS

Exemple 2

Le code HTML

Le code CSS

Appliquer une transformation 3D à une collection d'éléments

Le code de la page

Le rendu

Effet "card flip" ou retourné de carte

Exemple

Vieux cochon !

Le code HTML

Le code CSS