Chapitre 4
Galeries
Retour Accueil CSS
32 Carrousel de photographies.
Termes CSS clés employés : transform:translate(), transform:rotate().
Compatibilité navigateurs : IE10+, Firefox16+. Chrome et Safari avec le préfixe -webkit-.
Problématique
Réaliser un carrousel de photographies présenté en 3D et à défilement continu.
Résolution théorique
Ce problème n’est en pratique qu’un dérivé du problème précédent. Un élément conteneur
div contient des éléments renfermant eux-mêmes les différentes images.
Chaque face subit une rotation à l’aide de la fonction transform:translate pour être mise
en place correctement, le conteneur se voyant appliquer transform-style:preserve3D afin de pouvoir être manipulé en bloc.
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.
Tout autre contenu pourrait être ajouté à ces éléments.
<div class="conteneur">
<div id="carrousel">
<div><img src=adresseimage1></div>
<div><img src=adresseimage2></div>
…
<div><img src=adresseimagen></div>
</div>
</div>
Le code CSS définit d’abord l’élément conteneur en fixant sa profondeur de fuite.
.conteneur {
margin: 200px;
width: 240px;
height: 240px;
position: relative;
perspective: 1100px;
}
L’élément carrousel est ensuite défini. La fonction transform-style: preserve-3d
garantit qu’il sera traité comme bloc unique, ses enfants partageant son contexte 3D.
#carrousel {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
Sont ensuite définies les caractéristiques globales des éléments contenant les photographies
individuelles…
#carrousel div {
display: block;
position: absolute;
width: 200px;
height: 200px;
left: 5px;
top: 10px;
border: 1px solid black;
}
… puis les caractéristiques individuelles de chaque membre du carrousel.
#carrousel div:nth-child(1) {transform: rotateY( 0deg) translateZ(182px);}
#carrousel div:nth-child(2) {transform: rotateY( 60deg) translateZ(182px);}
#carrousel div:nth-child(3) {transform: rotateY(120deg) translateZ(182px);}
#carrousel div:nth-child(4) {transform: rotateY(180deg) translateZ(182px);}
#carrousel div:nth-child(5) {transform: rotateY(240deg) translateZ(182px);}
#carrousel div:nth-child(6) {transform: rotateY(300deg) translateZ(182px);}
Remarquez que, plutôt que d’employer des classes comme dans le cas du cube, nous avons ici
recours à la pseudo-classe nth-child(n). Cette étape est toutefois un peu plus
délicate, car les paramètres à employer dépendent du nombre de photographies ainsi que de
la taille unitaire de chaque photographie.
- L’angle de rotation individuel est 360/nombre de photographies. Avec six éléments, il est ici de 60° et les rotations sont donc des incréments successifs de 60°.
- Le décalage sur l’axe Z est obtenu par la formule suivante :
(taille de l’élément+intervalle/2)/tangente(angle/2)
soit ici (210/2)/tang(60/2)=105/tang(30)=182
En augmentant cette valeur vous augmentez l’écartement visible entre les images.
Il ne reste qu’à définir l’animation… Contrairement à celle du cube, elle n’agit ici que sur le plan horizontal.
#carrousel {
…
animation: tourneCarrousel 25s infinite ease-in-out;
}
/*animation css*/
@keyframes tourneCarrousel {
0% {transform: rotateY( 0deg ) ;}
100% {transform: rotateY( 360deg ) ;}
Carrousel
Comme pour le cube encore, pour obtenir un défilement image par image il faudrait recourir à des boutons et à un script. Pour passer à l’image suivante, on appliquerait simplement transform: rotateY(60deg), et transform: rotateY(-60deg) pour atteindre l’image précédente.
Retour Accueil CSS
|
|---|