3D Transform in all axis

by iamvdo

HTML

<div id="anim">
    
</div>

CSS

body{
width:200px;
height:200px;
/*perspective*/
-webkit-perspective:800px;
   -moz-perspective:800px;
    -ms-perspective:800px;
     -o-perspective:800px;
        perspective:800px;
}
#anim{
width:200px;
height:200px;
margin:100px;
background:red;
    -webkit-transform-style: preserve-3d;
/*transform*/
-webkit-transform:rotateX(0) rotateY(0) rotateZ(0);
   -moz-transform:rotateX(0) rotateY(0) rotateZ(0);
    -ms-transform:rotateX(0) rotateY(0) rotateZ(0);
     -o-transform:rotateX(0) rotateY(0) rotateZ(0);
        transform:rotateX(0) rotateY(0) rotateZ(0);
/*animation*/
-webkit-animation:rot 3s linear infinite;
   -moz-animation:rot 3s linear infinite;
    -ms-animation:rot 3s linear infinite;
     -o-animation:rot 3s linear infinite;
        animation:rot 3s linear infinite;
}
/*
@-webkit-keyframes rot{
from { -webkit-transform:rotateX(0) rotateY(0) rotateZ(0);}
   to{ -webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
@-moz-keyframes rot{
from { -moz-transform:rotateX(0) rotateY(0) rotateZ(0);}
   to{ -moz-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
@-ms-keyframes rot{
from { -ms-transform:rotateX(0) rotateY(0) rotateZ(0);}
   to{ -ms-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
*/

JavaScript

$(function(){
    var w = window.innerWidth;
    var h = window.innerHeight;
    var hH = 3;
    var angle = 90;
    
    $('html').mousemove(function(e){
          $('#anim').vasYBougeTonSpan(w,h,e.pageX,e.pageY,hH,angle);
        
     });
        
    $.fn.extend({
          vasYBougeTonSpan : function(w,h,x,y,hH,angle){
                    
            // px et py entre -1 et 1
            var px = (x-(w/2))/(w/2);
            var py = -((y-(h/hH))/(h/hH));
            // npx et npy -1 ou 1
            var npx = (px>0)?1:-1;
            var npy = (py>0)?1:-1;
            
            var ax = angle*px;
            var ay = angle*py;
            
            // rotateX+rotateY
            return this.css('-webkit-transform','rotateX('+ay+'deg) rotateY('+ax+'deg)');
            
            //rotate3d : bug car un seul angle possible?
            //$('#terreterre').css('-webkit-transform','rotate3d('+npx+','+npy+',0,'+ax+'deg)');
          }
     });
    
});