Making shadow rotate using CSS3

Before I make a shadow using image and put in the website, but now in this tutorial I going to make a shadow box using CSS3 rotate under the box as you see the image above.

And Browser Support
All of the major newest browsers support box-shadow property.

• Internet Explorer 9.0 and higher
• Firefox 3.5 and higher
• Chrome 1 and higher
• Safari 3 and higher
• Opera 10.5 and higher

The code below or you can download from here.
HTML

  
<div class="shadow">
   <span></span>

</div>

CSS

.shadow{
    margin:0 auto;
    width: 236px;
    height: 150px;
    position: relative;
    display: block;
    background: #ccc;
   }
   .shadow:before, .shadow:after{
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
    background: rgba(0,0,0,0.7);
    bottom: 7px;
    -webkit-box-shadow: 0 5px 10px #000000;
    -moz-box-shadow: 0 5px 10px #000000;
    /* box-shadow: 0 5px 10px #000000; */
    content: "";
    left: 10px;
    max-width: 300px;
    position: absolute;
    height: 20px;
    width: 50%;
    z-index: -1;
   }
   .shadow:after{
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
    left: auto;
    right: 10px;
   }