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