Accueil

Traduction

Tutoriel CSS - sommaire

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

Le code CSS

Sur survol chaque image subit une translation suivie d'une rotation.

Exemple2

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 !


Sur survol une carte de la première rangée, celle-ci bascule de 180 degrés (rotationX) puis la carte disparait ...
Sur survol d'une carte de la deuxième rangée, celle-ci bascule de 180 degrés (rotationX) et alors la carte apparait inversée, tel son reflet dans un miroir.

Le code HTML

Notez qu'à chaque carte est associée deux classes.

Le code CSS

Notez l'apparition de la propriété CSS : backface-visibility. La valeur par défaut de cette propriété est "visible".
Donc je n'étais pas obligé de la mentionner dans la définition de la classe "carte2".

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 classés "recto" et "verso". Ces deux enfants de "carte" ont pour "background" une image.

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.