Difference between revisions of "Template:Bordeaux/CSS"

 
(5 intermediate revisions by the same user not shown)
Line 117: Line 117:
 
         background: url(https://static.igem.org/mediawiki/2016/5/5c/T--Bordeaux--SleepyBanner.jpg) no-repeat center center scroll;
 
         background: url(https://static.igem.org/mediawiki/2016/5/5c/T--Bordeaux--SleepyBanner.jpg) no-repeat center center scroll;
 
         margin:0 auto;
 
         margin:0 auto;
−
         padding-top:50%;
+
         padding-top:42%;
 
         -webkit-background-size: cover;
 
         -webkit-background-size: cover;
 
         -moz-background-size: cover;
 
         -moz-background-size: cover;
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(20deg) translateZ(500px);}
 +
    #carousel figure:nth-child(3) { transform: rotateY(40deg) translateZ(500px);}
 +
    #carousel figure:nth-child(4) { transform: rotateY(60deg) translateZ(500px);}
 +
    #carousel figure:nth-child(5) { transform: rotateY(80deg) translateZ(500px);}
 +
    #carousel figure:nth-child(6) { transform: rotateY(100deg) translateZ(500px);}
 +
    #carousel figure:nth-child(7) { transform: rotateY(120deg) translateZ(500px);}
 +
    #carousel figure:nth-child(8) { transform: rotateY(140deg) translateZ(500px);}
 +
    #carousel figure:nth-child(9) { transform: rotateY(160deg) translateZ(500px);}
 +
    #carousel figure:nth-child(10) { transform: rotateY(180deg) translateZ(500px);}
 +
    #carousel figure:nth-child(11) { transform: rotateY(200deg) translateZ(500px);}
 +
    #carousel figure:nth-child(12) { transform: rotateY(220deg) translateZ(500px);}
 +
    #carousel figure:nth-child(13) { transform: rotateY(240deg) translateZ(500px);}
 +
    #carousel figure:nth-child(15) { transform: rotateY(260deg) translateZ(500px);}
 +
    #carousel figure:nth-child(16) { transform: rotateY(280deg) translateZ(500px);}
 +
    #carousel figure:nth-child(17) { transform: rotateY(300deg) translateZ(500px);}
 +
    #carousel figure:nth-child(18) { transform: rotateY(320deg) translateZ(500px);}
 +
    #carousel figure:nth-child(19) { transform: rotateY(340deg) translateZ(500px);}
 +
    #carousel figure:nth-child(20) { transform: rotateY(360deg) translateZ(500px);}
 +
 +
    img{
 +
   
 +
    cursor: pointer;
 +
    transition: all .5s ease;
 +
    }
 +
 +
    @keyframes rotation{
 +
        from{
 +
            transform: rotateY(0deg);
 +
        }
 +
        to{
 +
            transform: rotateY(360deg);
 +
        }
 
     }
 
     }
  

Latest revision as of 00:11, 20 October 2016