Termes CSS clés employés : transform:translate(), transform:rotate(), transform:scale3D().
Compatibilité navigateurs : IE10+, Firefox16+. Chrome et Safari avec le préfixe -webkit-.
Réaliser un tourbillon de cartes allant de la gauche vers la droite, pivotant et diminuant graduellement de taille.
Problème analogue au précédent. Une série d’images auxquelles on applique des transformations incrémentielles sera parfaire.
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);}
|
![]() |
---|