Cube experiment 1

http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/

by laustdeleuran

HTML

<div class="experiment">
    <div class="cube">
        <div class="face is-one">
            1
        </div>
        <div class="face is-two">
            2
        </div>
        <div class="face is-three">
            3
        </div>
        <div class="face is-four">
            4
        </div>
        <div class="face is-five">
            5
        </div>
        <div class="face is-six">
            6
        </div>
    </div>
</div>

CSS

.experiment {
    width: 200px;
    height: 200px;
    position: relative;
    perspective: 1000px;
}
.cube {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
}
.face {
    width: 196px;
    height: 196px;
    display: block;
    position: absolute;
    border: 2px solid black;
}
.face.is-one   { transform: rotateY(   0deg ) translateZ( 100px ); }
.face.is-two   { transform: rotateX( 180deg ) translateZ( 100px ); }
.face.is-three { transform: rotateY(  90deg ) translateZ( 100px ); }
.face.is-four  { transform: rotateY( -90deg ) translateZ( 100px ); }
.face.is-five  { transform: rotateX(  90deg ) translateZ( 100px ); }
.face.is-six   { transform: rotateX( -90deg ) translateZ( 100px ); }

JavaScript

$(document).ready(function () {
    var xAngle = 0, yAngle = 0; 
    
    $(document).on('keydown', function (event) {
        switch(event.keyCode) {        
            case 37: // left
                yAngle -= 90;
                break;
            case 38: // up
                xAngle += 90;
                break;
            case 39: // right
                yAngle += 90;
                break;
            case 40: // down
                xAngle -= 90;
                break;
        }
        $('.cube')[0].style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
    });
});