hoverマウス浮遊3 D移動効果





  
  
  JS Bin





  
$('#test').on('mousemove', function(e){ var offset = $('#test').offset() var x = e.pageX - offset.left var y = e.pageY - offset.top var centerX = $('#test').outerWidth() /2 var centerY = $('#test').outerHeight() /2 var deltaX = x - centerX var deltaY = y - centerY var percentX = deltaX / centerX var percentY = deltaY / centerY var deg = 10 $('#banner').css({ transform: 'rotateX('+deg*-percentY + 'deg)'+ ' rotateY('+deg*percentX+'deg)' }) }) $('#test').on('mouseleave', function(){ $('#banner').css({ transform: '' }) })