CSS wood tablet (perspective)

index.css

.tablet {display:inline-block; width:100%; position:relative;/* overflow:hidden;*/}

.tablet .fog {display:block; position:absolute; left:0; top:0; right:0; height:50%; z-index:1; background-image:-webkit-linear-gradient(rgba(255,255,255,1) 35%, rgba(255,255,255,0));background-image:-moz-linear-gradient(rgba(255,255,255,1) 35%, rgba(255,255,255,0));-ms-linear-gradient(rgba(255,255,255,1) 35%, rgba(255,255,255,0));background-image:linear-gradient(rgba(255,255,255,1) 35%, rgba(255,255,255,0)); opacity:1; -webkit-transition:opacity .5s;-moz-transition:opacity .5s;-ms-transition:opacity .5s;transition:opacity .5s;}

.tablet > .in .body > .top,
.tablet > .in .front,
.tablet > .in .body > .top .pseudo-pers div {display:block; background-color:#dba26a; background-image:url("http://abernier.name/books/wood.png");}

.tablet > .in {position:relative;/* top:-2.5em;*/ -webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;transition:all .5s;}

.tablet > .in .body {height:5em; position:relative;}
.tablet > .in .body > .content {position:absolute; bottom:0; width:100%; z-index:1; margin-bottom:1em; white-space:nowrap;}
.tablet > .in .body > .content > * {display:inline-block; vertical-align:bottom;}
.tablet > .in .body > .top {height:100%;}
.tablet > .in .body > .top .pseudo-pers {display:none;}
.tablet > .in .front {height:1em; border-top:.1em solid rgba(255,255,255,.2);}

/* pull system */
.tablet > .in .front .pull {margin-top:.25em; display:inline-block;-webkit-transform-origin:50% 0%;-moz-transform-origin:50% 0%;-ms-transform-origin:50% 0%;transform-origin:50% 0%; -webkit-animation:swing 3s ease-in-out infinite;-moz-animation:swing 3s ease-in-out infinite;-ms-animation:swing 3s ease-in-out infinite;animation:swing 3s ease-in-out infinite;}
.tablet > .in .front .pull .pin,
.tablet > .in .front .pull .yarn,
.tablet > .in .front .pull .ball {display:block; margin:0 auto;}
.tablet > .in .front .pull .pin {width:.5em; height:.5em; border-radius:100%; background-color:white; -webkit-box-shadow:0 0 .1em rgba(0,0,0,.5);-moz-box-shadow:0 0 .1em rgba(0,0,0,.5);-ms-box-shadow:0 0 .1em rgba(0,0,0,.5);box-shadow:0 0 .1em rgba(0,0,0,.5);}
.tablet > .in .front .pull .yarn {width:1px; height:3em; background-color:#999;}
.tablet > .in .front .pull .ball {width:1em; height:1em; border-radius:100%; background-color:white; -webkit-box-shadow:-.1em -.1em .4em rgba(0,0,0,.5) inset;-moz-box-shadow:-.1em -.1em .4em rgba(0,0,0,.5) inset;-ms-box-shadow:-.1em -.1em .4em rgba(0,0,0,.5) inset;box-shadow:-.1em -.1em .4em rgba(0,0,0,.5) inset;}

@-webkit-keyframes swing {
    0% {-webkit-transform:rotate(-3deg);}
    50% {-webkit-transform:rotate(3deg);}
    100% {-webkit-transform:rotate(-3deg);}
}
@-moz-keyframes swing {
    0% {-moz-transform:rotate(-3deg);}
    50% {-moz-transform:rotate(3deg);}
    100% {-moz-transform:rotate(-3deg);}
}
@-ms-keyframes swing {
    0% {-ms-transform:rotate(-3deg);}
    50% {-ms-transform:rotate(3deg);}
    100% {-ms-transform:rotate(-3deg);}
}
@keyframes swing {
    0% {transform:rotate(-3deg);}
    50% {transform:rotate(3deg);}
    100% {transform:rotate(-3deg);}
}

/* active */
.tablet:hover > .in {top:0;}
.tablet:hover > .fog {/*opacity:0;*/}

/* chanfrein */
.tablet > .in .body > .top,
.tablet > .in .front {border-radius:2px;}
.tablet > .in .body > .top {border-bottom-left-radius:0; border-bottom-right-radius:0;}
.tablet > .in .front {border-top-left-radius:0; border-top-right-radius:0;}
/** but without pseudo 3D */
.no-csstransforms3d.csstransforms .tablet > .in .body > .top {border-radius:0;}

/* perspective */

/** depth */
/*** 3D */
.csstransforms3d .tablet > .in .body {-webkit-perspective:800;-moz-perspective:800px;-ms-perspective:800;perspective:800;}
.csstransforms3d .tablet > .in .body > .top {-webkit-transform:rotateX(45deg);-moz-transform:rotateX(45deg);-ms-transform:rotateX(45deg);transform:rotateX(45deg); -webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%;}
/*** PSEUDO 3D */
.no-csstransforms3d.csstransforms .tablet > .in .body > .top {margin:0 1.8198em;/* @tablet-height * tan(20deg) */ position:relative;}
.no-csstransforms3d.csstransforms .tablet > .in .body > .top .pseudo-pers,
.no-csstransforms3d.csstransforms .tablet > .in .body > .top .pseudo-pers div {height:100%; position:relative; top:1px;}

.no-csstransforms3d.csstransforms .tablet > .in .body > .top,
.no-csstransforms3d.csstransforms .tablet > .in .body > .top .pseudo-pers div {background-image:none;}

.no-csstransforms3d.csstransforms .tablet > .in .body > .top .pseudo-pers {display:block; position:absolute; top:0; overflow:hidden; width:1.8198em;/* @tablet-height * tan(20deg) */}
.no-csstransforms3d.csstransforms .tablet > .in .body > .top .pseudo-pers.l {right:100%;}
.no-csstransforms3d.csstransforms .tablet > .in .body > .top .pseudo-pers.r {left:100%;}
.no-csstransforms3d.csstransforms .tablet > .in .body > .top .pseudo-pers div {-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%;}
.no-csstransforms3d.csstransforms .tablet > .in .body > .top .pseudo-pers.l div {-webkit-transform:skew(-20deg);-moz-transform:skew(-20deg);-ms-transform:skew(-20deg);transform:skew(-20deg);}
.no-csstransforms3d.csstransforms .tablet > .in .body > .top .pseudo-pers.r div {-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-ms-transform:skew(20deg);transform:skew(20deg);}

/** Light */
.csstransforms3d.cssgradients .tablet > .in .body > .top {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 > .in .front {background-image:-webkit-linear-gradient(0deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 100%),-webkit-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), url("http://abernier.name/books/wood.png");}



.polaroid {display:inline-block; background-color:white; box-shadow:0 0 .6em rgba(0,0,0,.5); padding:.3em; margin:0 .5em;}
.polaroid img {display:block; border:1px ridge #ccc;}
.polaroid .title {display:block; font-size:70%; font-family:monospace; margin-top:.5em; margin-bottom:1em; text-align:right;}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>CSS wood tablet</title>
    <style>
    html, body {height:100%;}
    html {display:table; width:100%;}
    body {display:table-cell; text-align:center; vertical-align:middle;}
    
    body {padding:1em;}
    </style>
    <link rel="stylesheet" href="index.css">
    <script src="http://www.modernizr.com/downloads/modernizr-2.0.6.js"></script>
  </head>
  <body>
    <div class="tablet">
      <div class="in">
        <div class="body">
          <b class="fog"></b>
          <div class="content">
              <span class="polaroid">
                <img src="https://graph.facebook.com/100000780442772/picture?type=square">
                <span class="title">Antoine Bernier</span>
              </span>
              <span class="polaroid">
                <img src="https://graph.facebook.com/philippe.alains/picture?type=square">
                <span class="title">Philippe Alain</span>
              </span>
              <span class="polaroid">
                <img src="https://graph.facebook.com/100002322930089/picture?type=square">
                <span class="title">Yannick Pouic</span>
              </span>
              <span class="polaroid">
                <img src="https://graph.facebook.com/nicolas.pouille/picture?type=square">
                <span class="title">Yannick Pouic</span>
              </span>
          </div>
          <div class="top">
            <div class="pseudo-pers l"><div></div></div>
            <div class="pseudo-pers r"><div></div></div>
          </div>
        </div>
        <div class="front">
          <div class="pull">
            <div class="pin"></div>
            <div class="yarn"></div>
            <div class="ball"></div>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>