95 lines
2.0 KiB
CSS
95 lines
2.0 KiB
CSS
.coverflow
|
|
{
|
|
padding: 2%;
|
|
}
|
|
|
|
.coverflow ul
|
|
{
|
|
width: 90%;
|
|
padding: 0;
|
|
perspective: 500px;
|
|
-webkit-perspective : 500px;
|
|
-moz-perspective : 500px;
|
|
}
|
|
|
|
.coverflow ul li{
|
|
padding-top : 4%;
|
|
display: inline-block;
|
|
width: 180px;
|
|
height: 280px;
|
|
background: orangered;
|
|
margin-right: -60px;
|
|
transform: rotateY(45deg);
|
|
-webkit-transform :rotateY(45deg);
|
|
-moz-transform :rotateY(45deg);
|
|
position: relative;
|
|
z-index: 50;
|
|
}
|
|
|
|
/* l'element actif element */
|
|
.coverflow ul li:nth-child(1)
|
|
{
|
|
display: inline-block;
|
|
width: 220px;
|
|
height: 320px;
|
|
background: orangered;
|
|
-webkit-transform :rotateY(0deg) scale(1.2);
|
|
-moz-transform :rotateY(0deg) scale(1.2);
|
|
transform: rotateY(0deg) scale(1.2);
|
|
|
|
z-index: 55;
|
|
}
|
|
|
|
/* z-index du premier et dernier element (derrière) */
|
|
.coverflow ul li:first-child,
|
|
.coverflow ul li:last-child{
|
|
|
|
z-index: 45;
|
|
}
|
|
|
|
/* les elements qui suivent l'element central */
|
|
.coverflow ul li:nth-child(1) ~ li
|
|
{
|
|
display: inline-block;
|
|
width: 180px;
|
|
height: 280px;
|
|
background: orangered;
|
|
transform: rotateY(-45deg);
|
|
-webkit-transform :rotateY(-45deg);
|
|
-moz-transform :rotateY(-45deg);
|
|
}
|
|
|
|
.coverflow ul li:hover,
|
|
.coverflow ul li:nth-child(1) ~ li:hover /* element survole */
|
|
{
|
|
display: inline-block;
|
|
width: 220px;
|
|
height: 320px;
|
|
background: black;
|
|
transform: rotateY(0deg) scale(1.2);
|
|
-webkit-transform: rotateY(0deg) scale(1.2);
|
|
-moz-transform: rotateY(0deg) scale(1.2);
|
|
|
|
z-index: 60;
|
|
}
|
|
|
|
.coverflow ul li:hover ~ li
|
|
{
|
|
transform: rotateY(-45deg);
|
|
-webkit-transform :rotateY(-45deg);
|
|
-moz-transform :rotateY(-45deg);
|
|
}
|
|
|
|
/* les elements non survoles, lors du survol du parent */
|
|
.coverflow ul:hover li:not(:hover){
|
|
transform: rotateY(45deg);
|
|
-moz-transform: rotateY(45deg);
|
|
-webkit-transform: rotateY(45deg);
|
|
}
|
|
|
|
/* les elements qui suivent l'element survole */
|
|
.coverflow ul:hover li:hover ~ li{
|
|
transform: rotateY(-45deg);
|
|
-moz-transform: rotateY(-45deg);
|
|
-webkit-transform: rotateY(-45deg);
|
|
} |