#bg {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index:0;}

*{margin: 0;padding: 0;outline: none;border: none;box-sizing: border-box;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
*:before,*:after{box-sizing: border-box;}
h1{display: table;margin: 5% auto 0;text-transform: uppercase;font-size: 4em;font-weight: 400;text-shadow: 0 1px white, 0 2px black;position:relative;margin-top: 40px;}
.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: 200px;height: 200px;left: 10px;top: 10px;background: black;overflow: hidden;border: solid 5px black;}
#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}

figure a img{-webkit-filter: grayscale(1);cursor: pointer;transition: all .5s ease;}
figure a img:hover{-webkit-filter: grayscale(0); transform: scale(1.2,1.2);}

@keyframes rotation{from{transform: rotateY(0deg);}to{transform: rotateY(360deg);}}