Experiment with 3D transform

by JeremiePat

HTML

<div id="scene">
    <div id="cube">
        <div id="first" class="front">11111</div>
        <div id="second" class="back">22222</div>
        <div id="third" class="hidden">33333</div>
    </div>
</div>

<input type="button" value="Turn Right" />
<input type="button" value="Turn up" onclick="document.getElementById('cube').className = 'turnup'" />
<input type="button" value="go back" onclick="document.getElementById('cube').className = ''" />

CSS

#scene{
    position:relative;
    margin: 2em auto;
    width:320px;
    height:240px;
    background:black;
    
    -moz-perspective: 800px;
}


#cube div{
    position: absolute;
    top:0;
    left:0;
    border: 5px solid #FFF;
    box-shadow: 0 0 10px rgba(0,0,0,.6);
    width:310px;
    height:230px;
}

#cube{
    -moz-transform-style: preserve-3d;
    -moz-transform:  rotateY(0), rotateX(0);
    -moz-transition: -moz-transform linear .5s;
}

#first{background:#900;}
#second{background:#090;}
#third{background:#009;}

.hidden{opacity:0;}
.front {
    -moz-transform:  translateZ(120px);
    z-index: 1;
}
.turnright .back {
    -moz-transform:  rotateY(270deg) translateZ(120px);
}
.turnup .back {
    -moz-transform:  rotateX(270deg) translateZ(120px);
}
.turnright{
    -moz-transform:  rotateY(40deg);
}
.turnup{
    -moz-transform:  rotateX(90deg);
}