Mover div en dirección al cursor

Al mover el cursor por la pantalla el objeto ubicado en el centro de la pantalla se moverá en dirección al mismo, los valores de rotate, pageX/Y, rotateX/Y en js, scale y perspective en css, están abiertos a ser editados y ajustados según la necesidad y gusto.

SASS

div{
    transform-origin: center center;
    transform: translateX(-50%) translateY(-50%) scale(1) perspective( 3000px ) rotateY(0deg) rotateX(0deg);
}

Javascript

var rotate = 60,
    pageX = $(document).width() * 3,
    pageY = $(document).height() * 3,
    mouseY = 0,
    mouseX = 0;

$(document).mousemove(function( event ) {
    mouseX = event.pageY;
    mouseY = event.pageX;
    rotateX = (pageX/2-mouseX)/pageX*rotate;
    rotateY = -(pageY/2-mouseY)/pageY*rotate;
    $('div').css({ '-webkit-transform' : 'translateX(-50%) translateY(-50%) scale(1) perspective( 3000px ) rotateY('+rotateY+'deg) rotateX('+rotateX+'deg)'});
});
Scroll to Top