国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

我用CSS3構(gòu)建了一個正方體,想用鼠標(biāo)控制正方體的旋轉(zhuǎn)(X軸與Y軸)

查看頁面

旋轉(zhuǎn)的核心代碼大概是這樣的:

    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){ //合并旋轉(zhuǎn)值,有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');
        })
    }

出現(xiàn)的問題是這樣的,第一次操作沒有問題,后面就會有問題,原因是旋轉(zhuǎn)操作貌似旋轉(zhuǎn)的是整個坐標(biāo)軸,導(dǎo)致后續(xù)再旋轉(zhuǎn)就出問題了.

頁面中有一個"模式切換"按鈕, 切換之后的效果就是我想要的,但是這個實現(xiàn)是每次旋轉(zhuǎn)都要嵌套兩個父結(jié)點,旋轉(zhuǎn)的都是父結(jié)點來達(dá)到效果的,多次控制之后DOM層級就會非常深,這樣肯定是不行的.

肯請大神指點一二