Accueil

Traduction

Tutoriel CSS - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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

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

Le code CSS

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

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

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 :

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

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

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.