Chapitre 5
Manipulation d'images
Retour Accueil CSS
36 Tourbillon de cartes.
Termes CSS clés employés : transform:translate(), transform:rotate(), transform:scale3D().
Compatibilité navigateurs : IE10+, Firefox16+. Chrome et Safari avec le préfixe -webkit-.
Problématique
Réaliser un tourbillon de cartes allant de la gauche vers la droite, pivotant et diminuant graduellement de taille.
Résolution théorique
Problème analogue au précédent. Une série d’images auxquelles on applique des transformations incrémentielles sera parfaire.
Résolution pratique
Le code HTML comprend un élément DIV conteneur, puis autant d’éléments IMG dotés d’une classe explicite que nécessaire (10 dans cet exemple).
<DIV>
<IMG src="adresse_carte">
<IMG class=deux src="adresse_carte">
…
<IMG class=dix src="adresse_carte">
</DIV>
Le code CSS applique à chaque classe d’élément IMG une transformation incrémentielle : une rotation X de 5° plus 5° par classe, une rotation Y de 5° par classe, une diminution de taille de 5% par classe et des translations vers la gauche et vers le bas un peu moins intuitives que j’avoue avoir déterminées « à l’œil ».
IMG.deux {transform:
rotateX(15deg)
rotate(10deg)
scale3D(.95,.95,.95)
translate(0px,0px);
}
IMG.trois {transform:
rotateX(20deg)
rotate(15deg)
scale3D(.9,.9,.9)
translate(-2px,2px);}
…
IMG.dix {transform:
rotateX(55deg)
rotate(50deg)
scale3D(.55,.55,.55)
translate(-120px,200px);}
Tourbillon de cartes
Retour Accueil CSS
|
|
|---|