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

  
  
  





  

    
banner
  

$('#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: ''
  })
})