jQuery 3d cube not rotating smoothly

Question

Code is too massive to write in here so heres fiddle: http://jsfiddle.net/yZd3v/
Problem: when i press LEFT/RIGHT ARROW cube rotatesY smoothly, but when i click UP/DOWN ARROW, it resets rotateY

if (key.keyCode == 37) {
            // left 37
            deg -= 10;
            $('#cube').css('-webkit-transform','translateZ(-100px) rotateY('+deg+'deg)');
            return false;
        } (more on jsfiddle)

Answer 1

You're forgetting that you need two different axes that are turning. See JsFiddle update: http://jsfiddle.net/yZd3v/1/

    degX = 0;
    degY = 0;
    $(document).keydown(function(key){
        if (key.keyCode == 37) {
            // left 37
            degY -= 10;
        } else if (key.keyCode == 39) {
            // right 39
            degY += 10;
        } else if (key.keyCode == 38) {
            // up 38
            degX += 10;
        } else if (key.keyCode == 40) {
            // down 40
            degX -= 10;
        } 

        $('#cube').css('-webkit-transform','translateZ(-100px) rotateX('+degX+'deg) rotateY(' + degY+'deg)');
        return false;
    });

Notice that there are two variables for your degrees, and you're rotating for both each time.