CSS3 3D CUBE move

Moving a cube using arrow keys

by mauricederegt

HTML

<!doctype html>
<html>
<body>
<div id="scene">
    Press the arrow keys...
    <div id="cube">
        <div class="face one">
            Face 1
        </div>
        <div class="face two">
            Face 2
        </div>
        <div class="face three">
            Face 3
        </div>
        <div class="face four">
            Face 4
        </div>
        <div class="face five">
            Face 5
        </div>
        <div class="face six">
            Face 6
        </div>
    </div>
</div>
</body>
</html>

CSS

#scene {
    padding: 10px;
    -webkit-perspective: 800;
}

#cube {
    position: relative;
    padding-top: 0;
    margin: 0 auto;
    height: 100px;
    width: 100px;
    -webkit-transition: -webkit-transform 0.4s linear;
    -webkit-transform-style: preserve-3d;

   
}

.face {
    position: absolute;
    height: 85px;
    width: 85px;
    border-style: solid;
    border-width: 5px;
    border-color: grey;
    padding: 5px;
    background-color: rgba(190, 190, 190, 0.7);
}

#cube .one  {
    -webkit-transform: rotateX(90deg) translateZ(50px);
}

#cube .two {
    -webkit-transform: translateZ(50px);
}

#cube .three {
    -webkit-transform: rotateY(90deg) translateZ(50px);
}

#cube .four {
    -webkit-transform: rotateY(180deg) translateZ(50px);
}

#cube .five {
    -webkit-transform: rotateY(-90deg) translateZ(50px);
}

#cube .six {
    -webkit-transform: rotateX(-90deg) translateZ(50px) rotate(180deg);
}

JavaScript

$(document).ready(function() { /*Initiate the cube css. This must be done in jquery since css is fluid*/
  //  initFluidCubeCSS();

    /*Don't touch this! We use global variables to remember the cube's current rotation*/
    window.cubescale = 1; //Initial scale is 1.
    window.cubeduration = 200; //Initial transition duration is 200ms.
    window.cubestate = 2;

    /*Bind handler to window for arrow keys to transform the cube*/
    $(window).bind('keydown', function(e) {
        arrowKeyHandler(e);
    });

});

/*Custom rotateCube method*/

function rotateCube(anglex, angley, anglez, scale, duration) {
    var cube = $('#cube'); /*Scale for cube to be drawn*/

    var oldMatrix = new WebKitCSSMatrix(cube[0].style.webkitTransform);
    var extrarotate = (new WebKitCSSMatrix()).rotate(anglex, angley, anglez);
    var final = extrarotate.multiply(oldMatrix);
    var finalstring = [];
    for (var i = 1; i < 5; i++) {
        for (var j = 1; j < 5; j++) {
            finalstring.push(Math.round(final['m' + i + j]));
        }
    }
    cube[0].style.webkitTransform = 'matrix3d(' + finalstring.join(',') + ')';

}

function arrowKeyHandler(e) {
    //$(window).unbind('keydown');
    var xAngle = 0;
    var yAngle = 0;
    var zAngle = 0;
    var xPos = 0;
		var yPos = 0;
    var zPos = 0;
    
    switch (e.keyCode) {
    case 38:
        //up
        xAngle = 90;
        yPos = 100;
        break;
    case 40:
        //down
        xAngle = -90;
        yPos = -100;
        break;
    case 37:
        //left
        yAngle = -90;
        xPos = -100;
        break;
    case 39:
        //right
        yAngle = 90;
        xPos = 100;
        break;
    }
    if (yAngle != 0 || xAngle != 0 || zAngle != 0) rotateCube(xAngle, yAngle, zAngle, "same", "same");
}