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

CSS : transformations 2D avec transition

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

Exercice 1

Survolez successivement sur chaque image et observez ...
Attention il s'agit d'une transition qui dure 5 secondes ; ne cessez pas de survolez l'élément !!!

Analyse du comportement sur survol

Dès que vous survolez une image dans la colonne de gauche, elle monte et diminue de taille (de moitié)
Dès que vous survolez une image dans la colonne du centre, elle tourne sur la droite, le point de rotation est l'angle haut gauche.
Dès que vous survolez une image dans la colonne de droite, elle descend et sa taille double.

Le code HTML correspondant

Deux classes sont associées à chaque élément IMG.

Travail à faire

Vous vous êtes rincé l'oeil, maintenant il faut bosser un peu. Vous devez compléter la feuille de style correspondante.

Exercice 2

Cliquez successivement sur chaque image et observez.
Attention il s'agit d'une transition qui dure 5 secondes ; ne cessez pas de cliquer !!!

Le code HTML

Travail à faire

Vous devez compléter la feuille de style correspondante.