jq 鼠标旋转控制也能3d旋转

//在写css3的3d动画的时候 有时候会想不到3d效果，为了方便观察元素到底在页面的3d的那个位置，写了这个鼠标移动事件来旋转页面方便查看元素位置
var rox=0;
var roy=0;
var xn= 0,yn=0;
var play=false;

$(document).mousedown(function(ev){
clearInterval(play);
var x_=ev.clientX;
var y_=ev.clientY;
$(this).bind("mousemove",function(ev){
var x=ev.clientX;
var y=ev.clientY;
xn= x-x_;
yn= y-y_;
roy += xn*0.2;
rox -= yn*0.1;
//camera.position.z =400;
camera.position.x =roy;
camera.position.y =rox;
camera.rotation.x =rox* Math.PI /180;
camera.rotation.y =roy* Math.PI /180;

//这个是在页面加个红色小方块检测鼠标的位置

// $("body").append('<div style="width:5px;height:5px;position:absolute;top:'+y+'px;left:'+x+'px;background:red;"></div>')

//这里就是要旋转的元素 这里写了body，也可以写div啊啥的盒子东西
            $("body").css({
                "transform-style": "preserve-3d",
                "transform":'perspective(800px) rotateX('+rox+'deg) rotateY('+roy+'deg)',
                "-webkit-transform":'perspective(800px) rotateX('+rox+'deg) rotateY('+roy+'deg)'
            });
x_=ev.clientX;
            y_=ev.clientY;
        })
    }).mouseup(function(){
$(this).unbind("mousemove");
var play= setInterval(function(){
xn*=0.95; //xn=xn*0.95
yn*=0.95;
if(Math.abs(xn)<1&&Math.abs(yn)<1){
clearInterval(play);
            }
roy += xn*0.2;
rox -= yn*0.1;
camera.position.x =roy;
camera.position.y =rox;
camera.rotation.x =rox* Math.PI /180;
camera.rotation.y =roy* Math.PI /180;
        },30)

    })

转载于:https://www.cnblogs.com/fstgshow/p/5394740.html