Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Effet coverflow en full CSS

Utiliser les sélecteurs avancés, les transitions et les transformations CSS.

Création: octobre 2012Modifié:

Contenu
Full CSS Pas de JavaScript
Navigateurs
Firefox Safari Chrome Internet Explorer
Partagez
Facebook Twitter

Votez

81 votes4.58

Mettre à profit les sélecteurs avancés CSS3, les transitions et les transformations 3D pour réaliser l’effet Coverflow bien connu de tous. Tutoriel pas à pas.

Cet effet est maintenant un peu dépassé. En tout cas, il est vu et revu. Le but de cette démo est de reproduire ce fameux menu de présentation, mais sans utilisation de JavaScript. Vous allez voir que ce n’est pas si simple... C’est un bon exercice pour qui veut tester quelques sélecteurs avancés, et commencer avec les transitions CSS et les transformations 3D.

Note : Sur Firefox, pensez à désactiver les box-shadow (case à cocher) pour une expérience convenable. Voir à la fin de cet article pour l’explication.

La structure de base

Une simple liste HTML est utilisée ici. Chaque élément de liste <li> est affiché en display: inline-block et dimensionné.

ul{
   width: 560px;
   padding: 0;
}
ul li{
   display: inline-block;
   width: 112px;
   height: 165px;
   background: orangered;
}

Je ne m’étendrais pas plus sur les styles décoratifs, le principal étant ici la réalisation de l’effet.

Analyse de l’effet Coverflow

Analysons un peu ce que nous souhaitons au chargement de la page :

  • L’élément central est affiché devant nous, légèrement agrandi
  • Les autres éléments « regardent » cet élément :
    • Les éléments précédents subissent une rotation d’un certain angle
    • Les éléments suivants subissent une rotation du même angle, mais en négatif

Puis lors du survol, l’élément survolé prend le rôle de l’élément central. Les autres éléments se comportent de la même façon que précédemment.

Mise en place initiale

Pour notre première mise en place, appliquons :

  • une rotation de 45deg à tous nos éléments
  • une rotation de 0deg et une mise à l’échelle de notre élément central
  • une rotation de -45deg aux éléments qui suivent l’élément central. Pour cela, aidons-nous du sélecteur :nth-child() et du sélecteur d’adjacence indirecte ~.
/* tous les elements */
ul li{
   ...
   transform: rotateY(45deg);
}
/* l'element central */
ul li:nth-child(3){
   ...
   transform: rotateY(0deg) scale(1.2);
}
/* les elements qui suivent l'element central */
ul li:nth-child(3) ~ li{
   ...
   transform: rotateY(-45deg);
}

Pour une impression de 3D, il ne faut pas oublier de définir la perspective sur l’élément parent :

ul{
   ...
   perspective: 500px;
}

Ajouter les différents états

Attention, je vous préviens tout de suite, tout est une question de poids des sélecteurs !

Pour notre état survolé, il nous faut surclasser nos styles déjà appliqués. Tout d’abord, modifions l’état de l’élément survolé (avec la pseudo-classe :hover) :

/* l'élément survolé */
ul li:hover{
   ...
   transform: rotateY(0deg) scale(1.2);
}

Cela fonctionne mais deux problèmes se posent :

  • 1 - l’élément central reste dans son état d’origine
  • 2 - les éléments 4 et 5 ne subissent pas le survol. En fait, le sélecteur ul li:nth-child(3) ~ li défini plus haut est prioritaire. Il faut donc surclasser ce style.

Pour le problème 1, ajoutons simplement un style pour les éléments qui suivent l’élément survolé :

/* les elements qui suivent l'element survole */
ul li:hover ~ li{
   transform: rotateY(-45deg);
}

Pour le problème 2, ajoutons un sélecteur qui cible de manière plus précise que précédemment. Ici, nous ciblons les éléments survolés qui sont précédés de l’élément central (ul li:nth-child(3) ~ li:hover).

/* les éléments survolés */
ul li:hover,
ul li:nth-child(3) ~ li:hover{
   ...
   transform: rotateY(0deg) scale(1.2);
}

Nous avons donc corrigé ces deux problèmes. Quoique, pas tout à fait ! En fait, un dernier problème se pose :

  • 3 - l’élément central reste toujours dans son état d’origine lors du survol des éléments 4 et 5.

Pour régler le problème 3, et comme il n’existe pas de sélecteur d’adjacence inverse, nous allons devoir ajouter un style pour les éléments non survolés, mais seulement lors du survol du parent <ul>. Ce qui nous donne :

/* les elements non survoles, lors du survol du parent */
ul:hover li:not(:hover){
   transform: rotateY(45deg);
}

Cela semble marcher, sauf que non ! Nous venons en effet de surclasser un style précédent : celui du problème 1. Il nous faut donc mettre à jour notre sélecteur pour que cet ancien style surclasse le précédent. Ainsi, ajoutons le survol sur le parent ou ajoutons un id (le principal étant de surclasser le style) :

/* les elements qui suivent l'element survole */
ul:hover li:hover ~ li{
   transform: rotateY(-45deg);
}

ou

ul#id li:hover ~ li{
   transform: rotateY(-45deg);
}

Hourra ! :) Notre Coverflow se comporte bien comme attendu. Mais règlons encore les quelques petits bugs restants.

Empêcher le clignotement et ajouter les transitions

Nos éléments étant trop séparés les uns des autres (du aux transformations 3D), cela provoque un clignotement pendant le déplacement puisque la souris sort de l’élément. Ajoutons alors une marge négative pour resserrer l’ensemble. Modifions également la taille du parent, pour que l’origine de la perspective soit toujours centrée.

ul{
   ...
   width: 500px;
}
ul li{
   ...
   margin-right: -15px;
}

Ajoutons ensuite les transitions CSS pour un effet plus réaliste :

ul li{
   ...
   transition: all .45s;
}

Ici, toutes les propriétés sont animées en 0.45 seconde.

Gérer l’empilement avec z-index

Pour comprendre les problèmes d’empilement, modifions la couleur de certains éléments :

/* les elements pairs */
ul li:nth-child(odd){
   background: crimson;
}

Les éléments sont empilés en suivant leur ordre dans le code source (par défaut) et ce n’est pas ce que nous souhaitons.

Utilisons alors la propriété z-index sur nos éléments. Attention, il faut également penser à ajouter position: relative sinon le z-index est sans effet.

/* z-index de tous les elements */
ul li{
   ...
   position: relative;
   z-index: 50;
}

/* z-index de l'element central (devant) */
ul li:nth-child(3){
   ...
   z-index: 55;
}

/* z-index du premier et dernier element (derrière) */
ul li:first-child,
ul li:last-child{
   z-index: 45;
}

Enfin, modifions le z-index de l’élément survolé, et profitons-en pour surclasser le style du premier élément survolé :

/* les éléments survolés */
ul li:hover,
ul li:first-child:hover,
ul li:nth-child(3) ~ li:hover{
   ...
   z-index: 60;
}

Ouf ! C’est terminé. N’hésitez à voter pour cet article s’il vous a plu et à en discuter sur le forum de l’article si vous avez des questions.

Compatibilité

Le menu est fonctionnel dans tous les navigateurs récents, sauf Opera qui ne supporte pas encore les transformations 3D.

Sur Firefox, un bug connu provoque un clignotement des éléments. C’est le cas lorsque box-shadow, transition et transform3D sont utilisés conjointement. Pour une expérience convenable, pensez à désactiver les box-shadow (case à cocher)

De plus, l’effet est limité à une utilisation à la souris. Il ne tient qu’à vous de mettre en place une utilisation tactile ou clavier.

Envie d'une nouvelle démo?

Un p'tit mot...

#1par Robin4a4, le 15 octobre 2012

Tout simplement génial ! Y’a pas d’autres mots. Merci beaucoup pour ce tuto très bien expliqué !

#2par gloriole, le 19 octobre 2012

Moi aussi j’aime ce beau travail qui est fait. Et, juste avouer que j’apprécie vraiment. Merci !

#3par shalk, le 31 octobre 2012

impressionnant.
Un gros travail sur les sélecteurs !
Je vais refaire cet exo, pour mieux appréhender.
Merci pour le cour ;)

#4par kev, le 14 novembre 2012

excellent, il manque juste un complément pour l’arret sur image lors d’un clic

#5par romram, le 15 novembre 2012

Ca marche parfaitement sur Chrome et Safari. Par contre, même sans les ombres, ça rend très mal sur Firefox, et sur IE 9 (comme d’habitude), ça ne fonctionne pas du tout. Enfin sinon, c’est vraiment superbe, bravo !

#6par speecial, le 14 février 2013

aie aie raide dingue de ces effets de transition (merci le css3 et bravo)

#7par Gotrunk95, le 7 mars 2013

Génial ça fonctionne parfaitement avec Firefox 19 même le bug de l’ombre a été corrigé

#8par marco, le 20 janvier 2014

vraiment super bien tes tutos je te souhaite beaucoup de courage encore. super génial


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)