Tutoriel CSS3 - sommaire

Transformations 3D avec transitions

Dans le chapitre précédent j'ai présenté le principe d'une zone 3D et j'ai abordé les transformations 3D. Dans cette page je traite des transformations 3D avec transitions.

Exemple 1

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

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

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) s'applique qu'en cas de survol de l'image.

Exemple 2

Dans ce deuxième exemple j'introduis une nouvelle propriété CSS backface-visibility ...

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) et la carte apparait retournée.
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

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 : visible; }
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".

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 web

Le code CSS

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; }

Observez la règle de style qui s'applique aux images ! Toutes les images doivent être affichées dans un emplacement 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 de 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.

Le code HTML

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

Le script

document.querySelector("button").onclick = function()
{

	let transformables = document.querySelectorAll("article img");

	for (let i in transformables) 
		{
			transformables[i].classList.toggle("transformer");
		}
} // fin fonction

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 objet IMG contenu dans le conteneur ARTICLE.

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 !

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 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.