Bouncing 3D box CSS3

by Umar

HTML

<div class="holder">
  <a target="_blank" href="https://plus.google.com/u/0/b/108022299398192291562/108022299398192291562/">
      <div class="h1"></div>
      <div class="h2"></div>
      <div class="h3"></div>
  </a>
</div>

CSS

body{
background: url(http://subtlepatterns.com/patterns/furley_bg.png);
}
.holder {
   position: relative;
   width: 215px;
   height: 215px;
   margin: 40px;
   z-index: 999a;
   cursor: pointer;
}
.h1 {
   background: url(http://picbox.im/image/209a643d3d-1.png);
   width: 210px;
   height: 86px;
   position: absolute;
   z-index:10;
}
.h2 {
   background: url(http://picbox.im/image/29ce86daf0-g.png);
   width: 181px;
   height: 92px;
   position: absolute;
   z-index: 20;
   top: 90px;
   left: 14px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.h3 {
   background: url(http://picbox.im/image/87659c6f06-2.png);
   width: 210px;
   height: 174px;
   position: absolute;
   z-index:30;
   top: 37px;
}
.holder:hover .h2 {
    top: -5px;
}