Page réservée aux adultes (lol)

Rien n'interdit qu'une transition porte sur une transformation.
C'est ce que je fais dans cette page : transformations avec transition d'images coquines : transformations 2D puis 3D.

Transformations 2D avec transitions

Survolez successivement sur chaque image et observez ...

Le code correspondant

... <style> img {display : inline-block ; margin : 2% ; width :20%; vertical-align : top ; transition : transform 5s; } img.droite:hover {transform : translateY(200px) scale(2) rotate(90deg);} img.gauche:hover {transform : translateY(-200px) scale(2) rotate(-90deg);} ... <body> ... <img src ='../images/jolie_fille.jpg' class ="droite"> <img src ='../images/brune_nue.jpg' class ="gauche" > <img src ='../images/seins_nus.jpg' class ="droite"> <img src ='../images/black_nue.jpg' class ="gauche" > ...

Si survol sur d'une image cette dernière met 5 secondes pour descendre (ou remonter) doubler de taille, s'incliner à 90% soit vers la droite ou la gauche.

Transformations 3D avec transitions

Survolez successivement sur chaque image de charme et observez ...

Le code correspondant

... img.grande {display : inline-block ; margin : 4% ; width :40%; vertical-align : top ; transition : transform 5s; } img.transition1:hover{transform :translate3d(200px, -200px,-400px);} img.transition2:hover{transform :rotateX(45deg) rotateY(45deg) rotateZ(45deg);} img.transition3:hover{transform :rotateZ(-45deg) translateZ(400px);} ... <section style ="border : 1px solid black ; perspective : 600px ; perspective-origin : center top ;"> <img src ='../images/jolie_fille.jpg' class ="grande transition1"> <img src ='../images/brune_nue.jpg' class="grande transition1" > <img src ='../images/seins_nus.jpg' class ="grande transition2" > <img src ='../images/black_nue.jpg' class ="grande transition2" > <img src ='../images/trikini.jpg' class ="grande transition3" > <img src ='../images/bikini.jpg' class ="grande transition3" > </section> ...

Les images sont contenues dans la boite section. Pour cette boite il y a un axe Z !
Ici j'ai utilisé la propriété perspective-origine car je voulais que le point fuite soit situé au milieu du haut et non pas au centre de la boite 3D.
Notez qu'à chaque image sont associées deux classes :une pour gérer la taille de l'image et une pour gérer la transformation 3D.
Si survol d'une image de la première rangée celle-ci se déplace à droite, en haut et vers le point de fuite donc la taille affichée diminue (effet de perspective). J'ai utilise la commande translate3d(x,y,z).
Si survol d'une image de la deuxième rangée celle-ci subit une torsion car rotation sur les trois axes.
Si survol d'une image de la dernière rangée celle-ci subit une rotation et sort de l'écran ...

Syntaxe

On peut remplacer translateX, translateY, translateZ par translate3d(x,y,z); x ou y ou z peut être égal à zéro.
Il existe aussi la commande scale3d(x,y,z) qui remplace scaleX(nombre), scaleY(nombre), scaleZ(nombre).
Retour menu