Chapitre 5
Manipulation d'images
Retour Accueil CSS
35 Cartes empilées.
Termes CSS clés employés : transform:translate().
Compatibilité navigateurs : IE10+, Firefox16+. Chrome et Safari avec le préfixe -webkit-.
Problématique
Un webmestre souhaite présenter sur son site des cartes à jouer. Selon les cas, celles-ci peuvent se compter entre une et quatre : il voudrait matérialiser cela, en étant capable de définir rapidement dans le code la carte précise ainsi que le nombre (ce qui pourrait être obtenu à l’aide de code PHP pour une génération dynamique de contenu).
Résolution théorique
Cela peut être obtenu à l’aide d’un élément div de taille fixe (pour éviter tout impact
sur la page), renfermant des éléments img empilés et modifiés à l’aide de la fonction
transform:translate afin d’être légèrement décalés.
Résolution pratique
La structure HTML est un élément conteneur div de taille fixe, renfermant le contenu
composé d’éléments img en nombre variable.
<div>
<img src=adresseimage>
<img class=deux src=adresseimage>
<img classe=trois src=adresseimage>
<img classe=quatre src=adresseimage>
</div>
Pour empiler les éléments, il faut les décaler par rapport à leur position théorique. Dans le code CSS,
les éléments img se voient appliquer la fonction transform:translate de façon incrémentielle
(incrément de 80 pixels en largeur et de 10 pixels en hauteur).
div { width: 400px;}
img.deux {transform:translate(-80px,10px);}
img.trois {transform:translate(-160px,20px);}
img.quatre {transform:translate(-240px,30px);}
Cartes empilées
| 1 carte | 2 cartes | 3 cartes | 4 cartes |
|---|---|---|---|
 |
|
|
|
Variante 1 :
Il serait intéressant de voir les cartes présentées en éventail plutôt que d’être empilées.
Facile à obtenir : nous ajoutons à la méthode transform une fonction rotate(),
et modifions légèrement le décalage (la translation) pour que les cartes semblent pivoter à partir du coin inférieur gauche :
img.deux {transform:translate(-82px,8px) rotate(10deg);}
img.trois {transform:translate(-164px,16px) rotate(20deg);}
img.quatre {transform:translate(-246px,24px) rotate(30deg);}
Remarquez que pour plus de rapidité il serait préférable d’employer la fonction matrix(), en combinant les deux transformations appliquées.
Cartes empilées (II)
| 1 carte | 2 cartes | 3 cartes | 4 cartes |
|---|---|---|---|
|
|
|
|
Variante 2
L’éventail de cartes gagnerait sans doute à toujours être horizontal. Pour obtenir ce résultat, il
suffit d’attribuer des classes aux éléments div conteneurs et de faire pivoter ceux-ci
d’un angle négatif égal à la moitié de l’angle maximal de pivotement de la dernière carte :
div.deux {transform:rotate(-5deg);}
div.trois {transform:rotate(-10deg);}
div.quatre {transform:rotate(-15deg);}
Cartes empilées (III)
| 1 carte | 2 cartes | 3 cartes | 4 cartes |
|---|---|---|---|
|
|
|
|
Retour Accueil CSS
|
|---|