mk-3dcarousel/dist/mk-3dcarousel.min.css

A Simple 3D & Responsive Image Carousel

.mk-carousel{height:500px;overflow:hidden;display:none;position:relative;z-index:999;font-size:0;text-align:left}@media (max-width:767px){.mk-carousel{height:300px}}.mk-carousel>img{height:200px;position:relative;left:50%;top:50%;margin-top:-100px;margin-bottom:100%;opacity:.7;cursor:pointer;-webkit-transition:all .3s ease;transition:all .3s ease;-webkit-transform:perspective(200px) rotateY(-50deg);transform:perspective(200px) rotateY(-50deg);-webkit-box-reflect:below 0 -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(.5,transparent),to(rgba(0,0,0,.5)))}@media (max-width:767px){.mk-carousel>img{height:100px;margin-top:-50px}}.mk-carousel>img.active{z-index:2;opacity:1;-webkit-transition:all .3s ease;transition:all .3s ease;-webkit-transform:rotateY(0) scale(1.3);transform:rotateY(0) scale(1.3)}.mk-carousel>img.image-left{-webkit-transform:perspective(200px) rotateY(50deg);transform:perspective(200px) rotateY(50deg)}.mk-carousel .mk-nav-controls{position:absolute;z-index:999;top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);padding:0;font-size:12px;text-align:center}.mk-carousel .mk-nav-controls li{display:inline-block}.mk-carousel .mk-nav-controls li a{text-decoration:none;text-transform:uppercase;color:#999;display:inline-block;padding:7px 16px;line-height:1;border:1px solid #ddd;-webkit-transition:all .3s ease;transition:all .3s ease;word-break:break-word}.mk-carousel .mk-nav-controls li a:active,.mk-carousel .mk-nav-controls li a:focus,.mk-carousel .mk-nav-controls li a:hover{border-color:#eee;background:#eee;color:#777}