





Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Survolez 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.
Notez bien qu'à chaque image est affecté deux classes de style.
Sur survol chaque image subit une translation suivie d'une rotation.
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.
Notez qu'à chaque carte est associée deux classes.
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".
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.
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.
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.