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

© 1999-2014 Fabrice "Fyndhorn Elder" Lemainque
Get Firefox!