Box shadow curl effect in CSS

CSS

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

ul.box li {
list-style-type: none;
margin: 0 30px 30px 0;
padding: 0;
width: 250px;
height: 150px;
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); }

HTML

<ul class="box">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>