dynamic tranform on mousemove

28-11-17

HTML

<body>
<div>
<div>

</div>
<p>hello world</p>
</div>
<span>hello</span>
</body>

CSS

body>div{
  background:green;width:200px;
  height:200px;
  overflow:hidden;
}
body>div div{
  background:black;width:200px;
  height:100px;
  overflow:hidden;
}
p{
  text-align:center;
}

JavaScript

$( document ).on( "mousemove", function( event ) {
  $( "span" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
  
   $('body>div').css({'transform':'translateX('+event.pageX/80+'px) translateY('+event.pageY/80+'px) translateZ('+event.pageY/40+'px) rotateX('+event.pageX/500+'deg) rotateY('+event.pageY/500+'deg) rotateZ('+event.pageX/50+'deg)'
   });
    $('p').css({'transform':'translateX('+event.pageX/80+'px) translateY('+event.pageY/80+'px) translateZ('+event.pageY/80+'px) rotateX('+event.pageX/500+'deg) rotateY('+event.pageY/500+'deg) rotateZ('+event.pageY/500+'deg)'});
});