Controllable Cube

by XTREME104

HTML

<div id="experiment">
    <div id="cube">
        <div>
            One face
        </div>
        <div>
            Up, down, left, right
        </div>
        <div>
            Lorem ipsum.
        </div>
        <div>
            New forms of navigation are fun.
        </div>
        <div>
            Rotating 3D cube
        </div>
        <div>
            More content
        </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: 0 auto;
    height: 400px;
    width: 400px;
    -webkit-transition: -webkit-transform 2s linear;
    -webkit-transform-style: preserve-3d;
     -moz-transition: -webkit-transform 2s linear;
    -moz-transform-style: preserve-3d;
}

#cube > div {
    position: absolute;
    height: 360px;
    width: 360px;
    padding: 20px;
    background-color: rgba(50, 50, 50, 0.7);
}

#cube > div:first-child  {
    -webkit-transform: rotateX(90deg) translateZ(200px);
    -moz-transform: rotateX(90deg) translateZ(200px);
}

#cube > div:nth-child(2) {
    -webkit-transform: translateZ(200px);
    -moz-transform: translateZ(200px);
}

#cube > div:nth-child(3) {
    -webkit-transform: rotateY(90deg) translateZ(200px);
    -moz-transform: rotateY(90deg) translateZ(200px);
    text-align: center;
}

#cube > div:nth-child(4) {
    -webkit-transform: rotateY(180deg) translateZ(200px);
    -moz-transform: rotateY(180deg) translateZ(200px);
}

#cube > div:nth-child(5) {
    -webkit-transform: rotateY(-90deg) translateZ(200px);
    -moz-transform: rotateY(-90deg) translateZ(200px);
}

#cube > div:nth-child(6) {
    -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
    -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
}

JavaScript

$(function() {

    var mouse = {
        start: {}
    },
        touch = document.ontouchmove !== undefined,
        viewport = {
            x: -10,
            y: 20,
            el: $('#cube')[0],
            /*             bee: $('.pX img')[0], */
            move: function(coords) {
                if (coords) {
                    if (typeof coords.x === "number") this.x = coords.x;
                    if (typeof coords.y === "number") this.y = coords.y;
                }

                /*                 this.bee.style.webkitTransform = "rotateX(-"+this.x+"deg) rotateY(-"+this.y+"deg)"; */
                this.el.style.webkitTransform = "rotateX(" + this.x + "deg) rotateY(" + this.y + "deg)";
            },
            reset: function() {
                this.move({
                    x: 0,
                    y: 0
                });
            }
        };

    viewport.duration = function() {
        var d = touch ? 50 : 500;
        viewport.el.style.webkitTransitionDuration = d + "ms";
        return d;
    }();

    $(document).keydown(function(evt) {
        switch (evt.keyCode) {
        case 37:
            // left
            viewport.move({
                y: viewport.y - 90
            });
            break;

        case 38:
            // up
            evt.preventDefault();
            viewport.move({
                x: viewport.x + 90
            });
            break;

        case 39:
            // right
            viewport.move({
                y: viewport.y + 90
            });
            break;

        case 40:
            // down
            evt.preventDefault();
            viewport.move({
                x: viewport.x - 90
            });
            break;

        case 27:
            //esc
            viewport.reset();
            break;

        default:
            break;
        };
    }).bind('mousedown touchstart', function(evt) {
        delete mouse.last;
        if ($(evt.target).is('a, iframe')) {
           ...