Tutoriel CSS3 - sommaire

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.

Exemple

Survolez successivement sur chaque image et observez ...
Attention il s'agit d'une transition qui dure 5 secondes ; le curseur doit rester sur l'image ce laps de temps.

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 image.

Travail à faire

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

img.petit {display : inline-block ; margin : 1% ; width :30%; 
	vertical-align : top ; transition : transform 5s; }
img.gauche:hover {transform : translateY(-200px) scale(.5); }
img.centre:hover {transform : rotate(45deg) ; transform-origin : top left; }
img.droite:hover {transform : translateY(200px) scale(2);}

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 temps imparti.

Pour chaque carte il y a deux transformations lors du clic :
• As de coeur : rotation et réduction
• As de carreau : rotation et agrandissement
• As de trèfle : déplacement en bas et à droite
• As de pique : déplacement en haut et à gauche

Le code HTML

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 : ...		; }

Créer un effet zoom

La propriété transform argumentée avec la commande scale() permet de créer un effet zoom sur survol ou clic.

Rendu d'un document HTML dans un Iframe

La feuille de style interne du document

img {width : 30%; vertical-align : top ; 
		margin : 1%; transition : transform 3s;}
img:hover{transform : scale(2); }

Le code HTML du document

Appliquer la même transformation à toutes les images de la page

Via un script une nouvelle classe s'applique à la collection d'images.

La feuille de style interne du document HTML

	img {display : inline-block ; margin : 1% ; 
		width : 18%; height : 150px ;  object-fit: contain; ; 
		border : 1px solid red;   }
	.transformer 
		{transform : translateY(200px) scale(2); transition : transform 5s; }

Observez la règle de style qui s'applique aux images ! Toutes les images doivent être affichées dans une zone de 18% par 150px avec un bordurage rouge.
Or elles n'ont pas toutes le même ratio largeur/hauteur. Il faut donc utiliser la propriété object-fit pour qu'il n'y ait pas déformation de l'image. Si la valeur de cette propriété vaut "contain" il n'y aura pas rognage mais l'image n'occupera pas forcément la zone d'affichage qui lui est dédiée.

Notez la classe "transformer" qui prévoit une transformation 2D avec transition.

Le code HTML

Le script

...
function ftransformer()
{
for (var i in document.images) 
	{
		document.images[i].classList.toggle("transformer");
	}
} // fin fonction 
...

Le rendu

Notez bien que les images ont toutes la même hauteur mais pas la même largeur (bandes blanches à gauche et à droite plus ou moins larges).
Elles ne sont pas rognées ; ce qui aurait êté le cas éventuellement avec object-fit : cover