jQuery 3d 立方体旋转不流畅

Question

代码太大，不能写在这里，所以这里是 fiddle :http://jsfiddle.net/yZd3v/
问题:当我按向左/向右箭头时，立方体平滑地旋转 Y，但是当我单击向上/向下箭头时，它会重置旋转 Y

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

Answer 1

您忘记了您需要两个不同的轴在转动。 请参阅 JsFiddle 更新: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;
    });

请注意，您的学位有两个变量，并且您每次都在轮换。