Accueil

Tutoriel CSS - sommaire

Vous pouvez me contacter via Facebook (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

... <br><img src ='../images/bikini7.jpg' class ="petit gauche"> <img src ='../images/bikini2.jpg' class ="petit centre"> <img src ='../images/bikini4.jpg' class="petit droite" > <br><img src ='../images/bikini.jpg' class ="petit gauche" > <img src ='../images/bikini6.jpg' class ="petit centre" > <img src ='../images/bikini3.jpg' class ="petit droite" > ...

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.

	img.petit {display : ...		; margin : 1% ; width :30%; vertical-align : ... ; 
		transition : ...				; }
	img.gauche:hover {transform : ...						; }
	img.centre:hover {transform : ...			 			; transform-origin : ...		; }
	img.droite:hover {transform : ...						;}

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

<img src="../images/as_coeur.jpg" id ="carte1" class ="carte"/> <img src="../images/as_carreau.jpg" id ="carte2" class ="carte"/> <br> <img src="../images/as_trefle.jpg" id ="carte3" class ="carte"/> <img src="../images/as_pique.jpg" id ="carte4" class ="carte"/>

Travail à faire

Vous devez compléter la feuille de style correspondante.

	img.carte {display : ...		 ; margin : 1% ; width :30%; 
		vertical-align : top ; ...		 : transform 5s; }
	#carte1:active {transform : ... 				; }
	#carte2:active {transform : ...					 ;}
	#carte3:active {transform : ... 				; }
	#carte4:active {transform : ...					 ; }