css only depth shadow

by SebastianPataneMasuelli

HTML

<div class="container">
    <div class="box">
    fds<br />fds<br />fds<br />fds<br />fds<br />fds<br />fds<br />fds<br />fds<br />fds<br />fds<br />fds<br />
</div>
</div>

CSS

body { background: pink }

.container {
    -webkit-transform: rotate(-5deg) scale(.75);  
}
.box {
    background-color: #FFFFFF;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    margin: 0 auto;
    padding: 50px;
    position: relative;
    width: 500px;
    

}  

.box:before, .box:after  
    {  
        position: absolute;  
        width: 40%;  
        height: 10px;  
        content: ' ';  
        left: 12px;  
        bottom: 12px;  
        background: transparent;  
        -webkit-transform: skew(-5deg) rotate(-5deg);  
        -moz-transform: skew(-5deg) rotate(-5deg);  
        -ms-transform: skew(-5deg) rotate(-5deg);  
        -o-transform: skew(-5deg) rotate(-5deg);  
        transform: skew(-5deg) rotate(-5deg);  
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);  
        -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);  
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);  
        z-index: -1;  
    }  
    .box:after  
    {  
        left: auto;  
        right: 12px;  
        -webkit-transform: skew(5deg) rotate(5deg);  
        -moz-transform: skew(5deg) rotate(5deg);  
        -ms-transform: skew(5deg) rotate(5deg);  
        -o-transform: skew(5deg) rotate(5deg);  
        transform: skew(5deg) rotate(5deg);  
    }