<h2>Material Design 3D Card Split & Join</h2>
<h4>Click on the card</h4>

<div class="parent">
  <div class="material"></div>
  <div class="material"></div>
  <div class="material"></div>
</div>
body {
  background: #f39c12;
}

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

p {
  margin: 0 auto;
  font-family: Lato;
}

.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);
}

.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);
}

h2,
h4 {
  font-family: Lato;
  color: white;
  font-weight: 300;
  text-align: center;
}

h2{
    margin-top: 10%;
}

h4 {
  color: #f1c40f
}
$('.material').click(function() {
   $('.material').toggleClass('active');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js