﻿.container-3D{margin:4% auto;width:210px;height:140px;position:relative;perspective:1000px;margin-bottom:100px;margin-top:75px;}
#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:90%;height:50%px;left:10px;top:10px;background:#000;overflow:hidden;border:solid 5px #000}
#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)}
#carousel figure:nth-child(10){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(11){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(12){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(13){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(14){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(15){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(16){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(17){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(18){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(19){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(20){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(21){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(22){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(23){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(24){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(25){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(26){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(27){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(28){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(29){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(30){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(31){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(32){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(33){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(34){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(35){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(36){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(37){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(38){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(39){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(40){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(41){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(42){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(43){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(44){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(45){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(46){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(47){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(48){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(49){transform:rotateY(320deg) translateZ(288px)}
#carousel figure:nth-child(50){transform:rotateY(320deg) translateZ(288px)}
.container-3D img{-webkit-filter:grayscale(1);cursor:pointer;transition:all .5s ease}
.container-3D img:hover{-webkit-filter:grayscale(0);transform:scale(1.2,1.2)}
@keyframes rotation {
from{transform:rotateY(0deg)}
to{transform:rotateY(360deg)}
}