Pure CSS3 box-shadow page curl effect

HTML

<ul class="box">
    <li><a href="http://www.matthamm.com/box-shadow-curl.html">link</a></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS

}
ul.box {
margin: 0;
padding: 0;
clear: both;
overflow: hidden; }

ul.box li {
text-align: center;
list-style-type: none;
margin: 0 30px 30px 0;
padding: 50px;
width: 200px;
height: 100px;
border: 1px solid #efefef;
position: relative;
float: left;
background: #ffffff; /* old browsers */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }

ul.box li:after { 
z-index: -1; 
position: absolute; 
background: transparent; 
width: 70%; 
height: 55%; 
content: ''; 
right: 10px; 
bottom: 10px; 
transform: skew(15deg) rotate(6deg);
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); } 

ul.box li:before { 
z-index: -2; 
position: absolute; 
background: transparent; 
width: 70%; 
height: 55%; 
content: ''; 
left: 10px; 
bottom: 10px; 
transform: skew(-15deg) rotate(-6deg); 
-webkit-transform: skew(-15deg) rotate(-6deg); 
-moz-transform: skew(-15deg) rotate(-6deg); 
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); }