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.

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

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 : ... ; margin : 1% ; width :30%; vertical-align : ... ; transition : ... ; } img.gauche:hover {transform : ... ; } img.centre:hover {transform : ... ; transform-origin : top left; } 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 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.

Exemple

Rendu dans un iframe :

Le code correspondant

Observez les deux règles de style.

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

Grâce à un script une nouvelle classe s'applique à la collection d'images.

Le code de la page

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 toute la largeur ne sera pas forcément occupée.

Notez la classe "transformer" qui prévoit une transformation 2D avec transition.
Cette classe est appliquée à toutes les images via le script de la page.

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