CSS trapezoid tablet

HTML

<script src="http://www.modernizr.com/downloads/modernizr-2.0.6.js"></script>
<script src="http://fc09.deviantart.net/fs27/f/2008/070/d/a/Wood_tile_wallpaper_by_neko_xexe.png"></script>
<div class="tablet">
    <div class="body">
        <ul>
            <li></li>
    </div>
    <b class="front"></b>
</div>

CSS

html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}

body {padding:1em;}

.tablet {display:inline-block; width:100%;}

.tablet .body,
.tablet .front {display:block; background-color:#CA8954; background-image:url("http://abernier.name/books/wood.png");}

.tablet .body {height:5em;}
.tablet .front {height:1em; border-top:.1em solid rgba(255,255,255,.2);}

/* chanfrein */
.tablet .body,
.tablet .front {border-radius:2px;}
.tablet .body {border-bottom-left-radius:0; border-bottom-right-radius:0;}
.tablet .front {border-top-left-radius:0; border-top-right-radius:0;}

/* perspective */
/** depth */
.csstransforms3d .tablet {-webkit-perspective:400;}
.csstransforms3d .tablet .body {-webkit-transform:rotateX(45deg); -webkit-transform-origin:50% 100%;}
/** Light */
.csstransforms3d.cssgradients .tablet .body {background-image:-webkit-linear-gradient(260deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 100%), url("http://abernier.name/books/wood.png");}
.csstransforms3d.cssgradients .tablet .front {background-image:-webkit-linear-gradient(0deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 100%), url("http://abernier.name/books/wood.png");}