Chapitre 5
Manipulations d’images

Retour Accueil CSS

41 Zoom sur carte

Termes CSS clés employés : transform:translate(), transform:rotate(), transform :scale(), border-radius
Compatibilité navigateurs : IE10+, Firefox16+, Opera12.5+. Chrome et Safari avec le préfixe -webkit-.

Problématique

A partir d’un ensemble d’images, faire que le survol d’une d’entre-elles par le pointeur de la souris l’affiche en plus grand.

Résolution théorique

Le principe est analogue à l’effet zoom étudié précédemment, en exploitant le pseudo-élément :hover. Nous allons toutefois employer ici des transformations 2D, en exploitant également les transitions.

Résolution pratique

Le squelette HTML reste très classique : un élément div conteneur, renfermant des éléments img individuels.
<:div class="conteneur"> <img src="adresseimage1"> <img src="adresseimage2"> ... <img src="adresseimagen"> </div>
Dans le CSS, nous commençons par définir les caractéristiques du conteneur. Les points importants sont les définitions de la perspective et celle du maintien du contexte 3D.
div.conteneur {width:1000px; margin:50px auto 10px; padding-top:30px; padding-left:20%; perspective : 500; transform-style: preserve-3d;}
Nous définissons ensuite les caractéristiques fondamentales de chaque élément img. Ils sont définis comm flottants, avec des coins arrondis (ce sont des cartes) et le style de la transition est défini.
img { position:relative; border-radius:10px; border:1px solid black; background-color:white; padding:10px; height:100px; display:block; float:left; transition: all 0.5s ease-in-out; }
Viennent ensuite les caractéristiques individuelles de chaque élément, grâce au sélecteur :nth-child(n). Il est appliqué à chaque élément un z-index croissant : les images sont aussi superposées dans l’ordre, mais vous pourriez retenir un ordre quelconque. L’application de la méthode transform leur applique une rotation (quelconque) et une translation (dépendant un peu de la rotation appliquée).
div img:nth-child(1) { transform: rotate(-20deg); z-index:1;} div img:nth-child(2) { transform: rotate(-10deg) translate(-50px); z-index:2;} ... div img:nth-child(n) { transform: rotate(-10deg) translate(-220px, -50px); z-index:n;}
L’étape suivante consiste à spécifier le comportement lorsqu’un élément img est survolé par le pointeur. Seules deux déclarations sont montrées ici, car le code est très répétitif : définition du Z-index à 10 pour placer l’image au-dessus de toutes les autres et application de la méthode transform avec augmentation de taille de 50% (scale(1.5)), puis une translation pour ramener un peu l’image agrandie vers le centre. Il est inutile d’annuler la rotation puisque tout nouveau transform part de la situation originelle, annulant toute transformation antérieure.
div img:nth-child(1):hover { transform: scale(1.5) rotate(0deg) translate(50px); z-index:10;} .... div img:nth-child(n):hover { transform: scale(1.5) rotate(0deg) translate(-100px); z-index:10;} Remarquez qu’il ne faut pas trop déplacer l’image agrandie, de façon à ce que le pointeur reste dessus. Dès qu’il quitte l’image agrandie, celle-ci revient à la normale, puis s’agrandit à nouveau et ainsi de suite en boucle, procurant un effet un peu désagréable. Dans l’idéal, l’image agrandie doit recouvrir l’image normale. De même, remarquez que les paramètres de déplacement devraient être mieux liés aux dimensions du conteneur. Une solution est bien sûr d'attribuer une dimension fixe, comme dans le code proposé ici, et non une dimension adaptative comme appliqué dans le code de la page.

Zoom sur carte


Retour Accueil CSS

© 1999-2014 Fabrice "Fyndhorn Elder" Lemainque