Stacked Paper Effect in CSS3

Source : http://chrismcleod.me/2011/11/21/creating-a-stacked-paper-effect-in-css3/

by chrishrmnn

HTML

<div class="post"></div>

CSS

.post {
   position:relative;
   margin: 0 0 2em 0;
   background: #fff;
   padding: 10px;
   border: 1px solid rgba(0, 0, 0, 0.150);
   height:300px;
   width:250px;
    
   -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.18);
   -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.18);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.18);
}

.post:before {
   z-index: -1;
   position: absolute;
   top: -2px;
   left: 0;
   content: '';
   width: 100%;
   height: 100%;
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, 0.150);

   -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.19);
   -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.19);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.19);

   -webkit-transform: rotate(1deg);
   -moz-transform: rotate(1deg);
   -o-transform: rotate(1deg);
   -ms-transform: rotate(1deg);
   transform: rotate(1deg);
}

.post:after {
   z-index: -2;
   position: absolute;
   top: 1px;
   left: -2px;
   content: '';
   width: 100%;
   height: 100%;
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, 0.150);

   -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

   -webkit-transform: rotate(359deg);
   -moz-transform: rotate(359deg);
   -o-transform: rotate(359deg);
   -ms-transform: rotate(359deg);
   transform: rotate(359deg);
}

JavaScript

/* Source :http://chrismcleod.me/2011/11/21/creating-a-stacked-paper-effect-in-css3 */