Material Card Split & Join Interaction with CSS3 and jQuery

Google Material design inspired 3D card split & join interaction built using CSS3 transitions and a little jQuery magic.

How to use it:

1. Create a material design card that consists of 3 pieces of paper.

<div class="card">
  <div class="material"></div>
  <div class="material"></div>
  <div class="material"></div>
</div>

2. Style the card in the CSS.

.card {
  margin: 0 auto;
  margin-top: 30px;
  width: 200px;
}

.material {
  text-align: center;
  width: 200px;
  height: 50px;
  margin-top: -5px;
  margin-right: 0px;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 6px rgba(0,0,0,0.05);
  transition: .4s;
  -webkit-transition: .4s;
  border-radius: 2px;
}

.material:last-child {
  box-shadow: 0 1p 3px rgba(0, 0, 0, 0.12), 0 1p 2px rgba(0, 0, 0, 0.24);
}

3. The CSS / CSS3 rules for the active state of the card.

.material.active {
  margin-top: 10px;
  height: 50px;
  transition: .4s;
  -webkit-transition: .4s;
}

.material.active:first-child { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }

.material.active:nth-child(2) { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }

.material.active:last-child { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); }

4. Include the latest version of jQuery JavaScript library on the webpage.

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

5. The jQuery script to toggle the 'active' CSS when you click on the card.

$('.material').click(function() {
   $('.material').toggleClass('active');
});

---

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