多视角3D可旋转的HTML5 Logo动画

 document.addEventListener(‘mouseout’, onDocumentMouseOut, false);   
  
 mouseXOnMouseDown = event.clientX – windowHalfX;   
 targetRotationOnMouseDownX = targetRotationX;   
 mouseYOnMouseDown = event.clientY – windowHalfY;   
 targetRotationOnMouseDownY = targetRotationY;   
}   
  
function onDocumentMouseMove( event )   
{   
 mouseX = event.clientX – windowHalfX;   
 targetRotationX = targetRotationOnMouseDownX + (mouseX – mouseXOnMouseDown) * 0.02;   
 mouseY = event.clientY – windowHalfY;   
 targetRotationY = targetRotationOnMouseDownY + (mouseY – mouseYOnMouseDown) * 0.02;   
}   
  
function onDocumentMouseUp( event )   
{   
 document.removeEventListener(‘mousemove’, onDocumentMouseMove, false);   
 document.removeEventListener(‘mouseup’, onDocumentMouseUp, false);   
 document.removeEventListener(‘mouseout’, onDocumentMouseOut, false);   
}   
  
function onDocumentMouseOut( event )   
{   
 document.removeEventListener(‘mousemove’, onDocumentMouseMove, false);   
 document.removeEventListener(‘mouseup’, onDocumentMouseUp, false);   
 document.removeEventListener(‘mouseout’, onDocumentMouseOut, false);   
}   
  
function onDocumentTouchStart( event )   
{   
 if (event.touches.length == 1)   
 {   
  event.preventDefault();   
  
  mouseXOnMouseDown = event.touches[0].pageX – windowHalfX;   
  targetRotationOnMouseDownX = targetRotationX;   
  mouseYOnMouseDown = event.touches[0].pageY – windowHalfY;   
  targetRotationOnMouseDownY = targetRotationY;   
 }   
}   
  
function onDocumentTouchMove( event )   
{   
 if (event.touches.length == 1)   
 {   
  event.preventDefault();   
  
  mouseX = event.touches[0].pageX – windowHalfX;