3D Cube

With arrow navigation

by Jonathan_Ironman

HTML

<div class="test test-3dtransforms">
    <div id="experiment">
        <div id="cube" style="-webkit-transform: rotateX(0deg) rotateY(0deg);">
            <div class="face one">One face</div>
            <div class="face two">Up, down, left, right</div>
            <div class="face three">Face Three</div>
            <div class="face four">Face Four</div>
            <div class="face five">Face Five</div>
            <div class="face six">Face Six
                <img src="images/sonic.gif">
            </div>
        </div>
    </div>
</div>

CSS

#experiment {
        -webkit-perspective: 800;
        -webkit-perspective-origin: 50% 200px;
        -moz-perspective: 800;
        -moz-perspective-origin: 50% 200px;
    }
    #cube {
        position: relative;
        margin: 100px auto 0;
        height: 400px;
        width: 400px;
        -webkit-transition: -webkit-transform 2s linear;
        -webkit-transform-style: preserve-3d;
        -moz-transition: -moz-transform 2s linear;
        -moz-transform-style: preserve-3d;
    }
    .face {
        position: absolute;
        height: 360px;
        width: 360px;
        padding: 20px;
        background-color: #222;
        font-size: 27px;
        line-height: 1em;
        color: #fff;
        border: 1px solid #555;
        border-radius: 3px;
    }
    #cube .one {
        -webkit-transform: rotateX(90deg) translateZ(200px);
        -moz-transform: rotateX(90deg) translateZ(200px);
    }
    #cube .two {
        -webkit-transform: translateZ(200px);
        -moz-transform: translateZ(200px);
    }
    #cube .three {
        -webkit-transform: rotateY(90deg) translateZ(200px);
        -moz-transform: rotateY(90deg) translateZ(200px);
    }
    #cube .four {
        -webkit-transform: rotateY(180deg) translateZ(200px);
        -moz-transform: rotateY(180deg) translateZ(200px);
    }
    #cube .five {
        -webkit-transform: rotateY(-90deg) translateZ(200px);
        -moz-transform: rotateY(-90deg) translateZ(200px);
    }
    #cube .six {
        -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
        -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
    }

JavaScript

var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
    prop,
    el = document.createElement('div');

for (var i = 0, l = props.length; i < l; i++) {
    if (typeof el.style[props[i]] !== "undefined") {
        prop = props[i];
        break;
    }
}

var xAngle = 0,
    yAngle = 0;
$('body').keydown(function (evt) {
    switch (evt.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;
    }
    document.getElementById('cube').style[prop] = "rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
});