Chapitre 4
Galeries
Retour Accueil CSS
33 Carrousel de photographies (II).
Termes CSS clés employés : transform:translate(), transform:rotate().
Compatibilité navigateurs : IE10+, Firefox16+. Chrome et Safari avec le préfixe -webkit-.
Problématique
Autoriser dans le carrousel des images de largeur quelconque, tout en maintenant une hauteur fixe.
Résolution théorique
Pour obtenir le comportement désiré, nous allons employer des volets de largeur supérieure à la largeur maximale, l’image étant toujours fixée sur le bord extérieur de chaque volet. La constitution théorique reste identique : un élément conteneur DIV contient des éléments IMG renfermant eux-mêmes les différentes images. Pour afficher les différentes faces, on applique une rotation au conteneur.
Résolution pratique
La structure HTML est un élément conteneur DIV, renfermant un élément DIV constituant le carrousel et renfermant le contenu composé d’éléments DIV contenant les images en nombre variable.
<DIV class="conteneur">
<DIV id="carrousel">
<IMG src=adresseimage1 width="267">
<IMG src=adresseimage2 width="267">
<IMG src=adresseimage3 width="240">
<IMG src=adresseimage4 width="213">
<IMG src=adresseimage5 width="267">
</DIV>
</DIV>
Le code CSS définit d’abord l’élément conteneur :
.conteneur { padding-left: 180px; height: 160px;}
L’élément carrousel est ensuite défini.
#carrousel { height:400px;
transform-origin: 180px 0 0;
transform-style: preserve-3d;
}
Sont ensuite définies les caractéristiques globales des éléments contenant les photographies individuelles. Il est employé une boîte ombrée, avec une couleur de fond partiellement transparente pour voir les images se trouvant en dessous lorsqu’elles défilent.
#carousel IMG {
position: absolute;
border: 1px solid #ccc;
background: rgba(255,255,255,0.8);
box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}
… puis les caractéristiques individuelles de chaque membre du carrousel.
#carrousel IMG:nth-child(1) {transform :rotateY(0deg) translateX(180px);
padding: 0 0 0 93px;}
#carrousel IMG:nth-child(2) {transform: rotateY(-72deg) translateX(180px);
padding: 0 0 0 93px; }
#carrousel IMG:nth-child(3) {transform: rotateY(-144deg) translateX(180px);
padding: 0 0 0 120px;}
#carrousel IMG:nth-child(4) {transform: rotateY(-216deg) translateX(180px);
padding: 0 0 0 147px;}
#carrousel IMG:nth-child(5) {transform: rotateY(-288deg) translateX(180px);
padding: 0 0 0 93px; }
Nous employons ici aussi la pseudo-classe nth-child(n). Remarquez l’ajout de la définition d’un décalage à droite pour « plaquer » les images au bord de l’élément, qui possède ici une largeur totale de 360 pixels. Le paramètre de padding dépendra donc de la largeur de chaque image, ici pour plus de clarté précisé explicitement dans le code HTML (bien que cela soit superflu). Comme nous avons ici cinq images, l’angle de rotation individuelle est 360/5 = 72°. La rotation est inversée par rapport à l’exemple précédent : nous employons de valeurs angulaires négatives. Le décalage sur l’axe Z est la moitié de la largeur totale de l’élément, soit 180 pixels.
Il ne reste qu’à définir l’animation, qui comme dans l’exemple précédent n’agit que sur le plan horizontal.
#carrousel { animation: tourneCarrousel 10s infinite;}
/*animation css*/
@keyframes tourneCarrousel {
0% {transform: rotateY( 0deg ) ;}
100% {transform: rotateY( -360deg ) ;}
Carrousel (II)
Retour Accueil CSS
|
|---|