transform - CSS3的3D变换多次变换如何保持坐标轴不动,或者有矩阵算法可以实现否-PHP中文网问答

我用CSS3构建了一个正方体,想用鼠标控制正方体的旋转(X轴与Y轴)

查看页面

旋转的核心代码大概是这样的:

    var box = $("#box"); //box是3D对像的容器;
    var option_n = 0.5; //灵敏度
    box.on('mousedown',function(e){
        if(e.button === 0){
            mouse_left(e);
            return false;
        }
    })
    function mouse_left(e){ //合并旋转值,有bug
        var x,y;
        var zb_b = [e.pageX,e.pageY];
        var oldt = box.css('transform');
        $(document).on('mousemove.dh',function(e){
            var zb_e = [e.pageX,e.pageY];
            y = ((zb_e[0] - zb_b[0]) * option_n);
            x = (-(zb_e[1] - zb_b[1]) * option_n);
            var transform = 'rotateY('+y+'deg)' +' rotateX('+x+'deg)';
            dom.css('transform',oldt + transform);
        }).on('mouseup.dh',function(e){
            $(document).off('mousemove.dh');
            $(document).off('mouseup.dh');
        })
    }

出现的问题是这样的,第一次操作没有问题,后面就会有问题,原因是旋转操作貌似旋转的是整个坐标轴,导致后续再旋转就出问题了.

页面中有一个"模式切换"按钮, 切换之后的效果就是我想要的,但是这个实现是每次旋转都要嵌套两个父结点,旋转的都是父结点来达到效果的,多次控制之后DOM层级就会非常深,这样肯定是不行的.

肯请大神指点一二