Crossfader Cube Transforms

Crossfader Cube Transforms

by Nirvanachain

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>

CSS

h1, h3 {
    color:#666;
    font-family:sans-serif;
}

.screen {
    background:#000;
    width:556px;
    height:320px;
    overflow:hidden;
    position:relative;
    -webkit-perspective:600px;
}

.cube {
    width:200px;
    height:200px;
    position:absolute;
}

.cube .title {
    color:#fff;
    font-family:sans-serif;
    font-weight:lighter;
    padding:16px;
}

.title span {
    display:block;
    font-size:12px;
    padding-top:8px;
}

.red {
    background:#ed4343;
    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:#43b7ed;
    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:#222222;
    position:absolute;
    top:-40px;
    height:40px;
    line-height:40px;
    color:#fff;
    font-weight:bold;
    font-family:sans-serif;
    text-align:center;
    width:100%;
    opacity:0.8;
    -webkit-transition: -webkit-transform 0.5s ease;
}

.screen:hover .red {
        -webkit-transform: rotateY(-70deg) translateX(150px) translateY(24px) translateZ(50px);
}
.screen:hover .blue {
        -webkit-transform: rotateY(70deg) translateX( -150px )  translateY(24px) translateZ(50px);
}

.screen:hover .header {
    -webkit-transform: translateY(40px);
}

.screen:hover .next {
 opacity:1;   
        margin-top:0px;
}

.next {
    background:#ddd;
    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 );
    box-shadow:0px 0px 30px 10px #eee;
    opacity:0.4;
}

.screen .next {
    -webkit-transform: translate3d( 0px, 20px, 0px );
    box-shadow:none;
   ...