Difference between revisions of "Template:Bordeaux/CSS"

Line 276: Line 276:
 
         background-color:#000000;  
 
         background-color:#000000;  
 
         color:#72c9b6;
 
         color:#72c9b6;
 +
    }
 +
 +
/********************************* CAROUSEL ********************************/
 +
 +
.container{
 +
    margin: 4% auto;
 +
    width: 210px;
 +
    height: 140px;
 +
    position: relative;
 +
    perspective: 1000px;
 +
    }
 +
    #carousel{
 +
    width: 100%;
 +
    height: 100%;
 +
    position: absolute;
 +
    transform-style: preserve-3d;
 +
    animation: rotation 20s infinite linear;
 +
    }
 +
 +
    #carousel:hover{
 +
    animation-play-state: paused;
 +
    }
 +
 +
    #carousel figure{
 +
    display: block;
 +
    position: absolute;
 +
    width: 186px;
 +
    height: 116px;
 +
    left: 10px;
 +
    top: 10px;
 +
    background: black;
 +
    overflow: hidden;
 +
    border: solid 5px black;
 +
    }
 +
 +
    #carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(500px);}
 +
    #carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(500px);}
 +
    #carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(500px);}
 +
    #carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(500px);}
 +
    #carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(500px);}
 +
    #carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(500px);}
 +
    #carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(500px);}
 +
    #carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(500px);}
 +
    #carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(500px);}
 +
    #carousel figure:nth-child(10) { transform: rotateY(360deg) translateZ(500px);}
 +
 +
    img{
 +
   
 +
    cursor: pointer;
 +
    transition: all .5s ease;
 +
    }
 +
 +
    img:hover{
 +
    transform: scale(1.2,1.2);
 +
    }
 +
 +
    @keyframes rotation{
 +
        from{
 +
            transform: rotateY(0deg);
 +
        }
 +
        to{
 +
            transform: rotateY(360deg);
 +
        }
 
     }
 
     }
  

Revision as of 09:14, 18 October 2016