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

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

Si vous avez lu la page précédente, vous savez comment procéder : une classe CSS gérant une transformation avec transition et un script appliquant la classe à toute la collection.

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.

la propriété object-fit est l'équivalent pour les éléments IMG, de la propriété background-size pour les éléments DIV.

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

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