Transformations avec transitions

Survolez successivement sur chaque image et observez ...

Le code de la page (extrait)

... <style> img{width : 20% ; transition : transform 5s; } img:hover {transform : scale(2) rotate(180deg); transform-origin : right bottom;} ... <body> ... <img src ='../images/jolie_fille.jpg' > <img src ='../images/brune_nue.jpg' > <img src ='../images/seins_nus.jpg' > ...

Nous avons vu la propriété transform et toutes ses fonctions puis les propriétés transition-property et transition-duration (qui peuvent être remplacées par la méga propriété transition).
Bien évidemment une transition peut porter sur des transformations. C'est le cas dans cette page.
Si survol sur une image cette dernière met 5 secondes pour se déplacer vers le haut, doubler de taille et se retourner complètement.
Notez que l'origine de la transformation est le coin bas droite de l'image grâce à l'emploi en plus de la propriété transform-origin.
Retour menu