In writing CSS3 3d animation sometimes can not think of 3d effect, in order to facilitate the observation element in the page in the end of the 3d location, wrote this mouse movement event to rotate the page easy to view the location of the element
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;
This is the location of the mouse on the page with a small red box
$ ("Body"). Append (' <div style= ' width:5px;height:5px;position:absolute;top: ' +y+ ' px;left: ' +x+ ' px;background: Red; " ></div> ')
Here is the element to be rotated. Here's the body, and you can write the div and the box.
$ ("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)
})
JQ Mouse Rotation control can also be rotated 3d