mk-3dcarousel/dist/mk-3dcarousel.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: 0.7;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    transition: all 0.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(0.5, transparent), to(rgba(0, 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 0.3s ease;
      transition: all 0.3s ease;
      -webkit-transform: rotateY(0deg) scale(1.3);
              transform: rotateY(0deg) 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 0.3s ease;
        transition: all 0.3s ease;
        word-break: break-word; }
        .mk-carousel .mk-nav-controls li a:hover, .mk-carousel .mk-nav-controls li a:focus, .mk-carousel .mk-nav-controls li a:active {
          border-color: #eee;
          background: #eee;
          color: #777; }