HTML<div class="title"><img src="http://frimousse67.f.r.pic.centerblog.net/70054f10.gif" alt="" width="164" height="146" /></div>

HTML<div class="screen"><div class="header">    Crosses | Library | New Packs  </div>  <div class="cube blue">    <div class="title">      SOMEBODY THAT U USED TO KNO      <span>GYOTE</span>    </div>  </div>  <div class="cube red">    <div class="title">    2 MILLION    <span>AVICII</span>    </div>  </div>  <div class="cube next">    <div class="title">      SHAKE DAT      <span>SAVAGE</span>    </div>  </div>  <div class="cube nextNext">    <div class="title">      NEXT SONG 0.9 OPACITY      <span>nextsongartist</span>      </div></div></div>

CSSh1, h3 {
 color:#;
 font-family:sans-serif;
 }
 
 .screen {
 background:#;
 width:506px;
 height:270px;
 overflow:hidden;
 position:relative;
 -webkit-perspective:400px;
 }
 
 .cube {border: 2px dotted #fff;
 border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;
 position:absolute;
 }
 .cube .title {
 color:#;
 font-family:sans-serif;
 font-weight:lighter;
 padding:3px;
 }
 .title span {
 display:block;
 font-size:12px;
 padding-top:3px;
 }
 
 .red {
 background:#;border: 2px dotted #fff;
 border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;
 top:50px;
 left:278px;
 -webkit-transform-origin: right center;
 -webkit-transform-style: preserve-3d;
 -webkit-transition: -webkit-transform 0.5s ease-in-out;
 z-index:50;
 }
 
 .blue {
 background:#;border: 2px dotted #fff;
 border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;
 top:50px;
 left:78px;
 -webkit-transform-origin: left center;
 -webkit-transform-style: preserve-3d;
 -webkit-transition: -webkit-transform 0.5s ease-in-out;
 z-index:50;
 }
 
 .header {
 background:#;border: 2px dotted #fff;
 border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;
 position:absolute;
 top:-20px;
 height:10px;
 line-height:10px;
 color:#fff;
 font-weight:bold;
 font-family:sans-serif;
 text-align:center;
 width:0%;
 opacity:0.8;
 -webkit-transition: -webkit-transform 0.5s ease;
 }
 
 .screen:hover .red {border: 2px dotted #fff;
 border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;
 -webkit-transform: rotateY(-70deg) translateX(150px) translateY(24px) translateZ(50px);
 }
 .screen:hover .blue {border: 2px dotted #fff;
 border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;
 -webkit-transform: rotateY(70deg) translateX( -150px ) translateY(24px) translateZ(50px); }
 
 .screen:hover .header {border: 2px dotted #fff;
 border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;
 -webkit-transform: translateY(40px);
 }
 
 .screen:hover .next {border: 2px dotted #fff;
 border-radius: 1em/1em;
 box-shadow: 3px 2px 6px #000000;
 opacity:1;
 margin-top:0px;
 }
 
 .next {
 background:#;
 top:50px;
 left:178px;
 -webkit-transform-origin: left center;
 -webkit-transform-style: preserve-3d;
 -webkit-transition: all 0.6s ease-in-out;
 z-index:1;
 -webkit-transform: translate3d( -50px, 400px, -800px );
 opacity:0.4;
 } 
 .screen .next {
 -webkit-transform: translate3d( 0px, 20px, 0px );
 box-shadow:none;
 opacity:0;
 margin-top:150px;
 } .nextNext {
 background:#; 
 top:50px;
 left:178px;
 -webkit-transform-origin: left center;
 -webkit-transform-style: preserve-3d;
 -webkit-transition: all 0.6s ease-in-out;
 z-index:100;
 -webkit-transform: translate3d( 0px, 600px, 600px );
 opacity:0.4;
 }
 .screen:hover .nextNext { 
 -webkit-transform: translate3d( 0px, 240px, 0px );
 box-shadow:none;
 opacity:0.9;
 }