3D Card Carousel / Rotator With jQuery And CSS3

A jQuery based 3D carousel that uses CSS3 transition and transform to rotate through a series of html elements like stacked cards.

How to use it:

1. Add a group of cards to your webpage.

<div class="container">
  <div data-card="4" class="card"></div>
  <div data-card="3" class="card"></div>
  <div data-card="2" class="card"></div>
  <div data-card="1" class="card"></div>
  <div data-card="0" class="card"></div>
</div>

2. The required CSS / CSS3 styles.

.card {
  position: absolute;
  top: 0;
  left: 0;
  background: #FFFFFF;
  width: 350px;
  height: 440px;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: 0.4s cubic-bezier(0.28, 0.55, 0.385, 1.65);
  transition: 0.4s cubic-bezier(0.28, 0.55, 0.385, 1.65);
  cursor: pointer;
}

.card:nth-child(1) {
  z-index: 10;
  top: 0px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.card:nth-child(2) {
  z-index: 9;
  top: -15px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  opacity: 0.9;
}

.card:nth-child(3) {
  z-index: 8;
  top: -30px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0.8;
}

.card:nth-child(4) {
  z-index: 7;
  top: -45px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  opacity: 0.7;
}

.card:nth-child(5) {
  z-index: 6;
  top: -60px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
  opacity: 0.6;
}

.card:nth-child(6) {
  z-index: 5;
  top: -75px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  opacity: 0.5;
}

.card:nth-child(7) {
  z-index: 4;
  top: -90px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.4);
  transform: scale(0.4);
  opacity: 0.4;
}

.card:nth-child(8) {
  z-index: 3;
  top: -105px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.3);
  transform: scale(0.3);
  opacity: 0.3;
}

.card:nth-child(9) {
  z-index: 2;
  top: -120px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.2);
  transform: scale(0.2);
  opacity: 0.2;
}

.card:nth-child(10) {
  z-index: 1;
  top: -135px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.1);
  transform: scale(0.1);
  opacity: 0.1;
}

.card:nth-child(11) {
  z-index: 0;
  top: -150px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
}

.card:first-child:hover {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.card:last-child { opacity: 0; }

3. Load the latest version of jQuery library at the end of the html document.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script> 

4. The core JavaScript to active the 3D carousel.

(function() {
  var rotate, timeline;

  rotate = function() {
    return $('.card:first-child').fadeOut(400, 'swing', function() {
      return $('.card:first-child').appendTo('.container').hide();
    }).fadeIn(400, 'swing');
  };

  timeline = setInterval(rotate, 1200);

  $('body').hover(function() {
    return clearInterval(timeline);
  });

  $('.card').click(function() {
    return rotate();
  });

}).call(this);

---

This awesome jQuery plugin is developed by andytran. For more Advanced Usages, please check the demo page or visit the official website.