hover鼠标悬浮3D移动效果

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<style type="text/css">
    *{box-sizing: border-box;}
div#test{
  width: 100%;
  height: 500px;
  background: white;
  padding: 100px 0; 
  margin: 100px auto;
  border: 1px solid #ddd;
  
  perspective: 1000px;
}

#banner{
  height: 300px;
  width: 400px;
  margin: 0 auto;
  background:  #37D7B2;
  transition: transform 0.1s;
  box-shadow: 0 0 15px rgba(0,0,0,0.25);
  text-align: center;
  line-height: 300px;
  font-size: 50px;
  color: #fff;
}

body{
  background: white;
  padding: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

  <div id="test">
    <div id="banner" >banner</div>
  </div>
<script>
$('#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: ''
  })
})
</script>
</body>
</html>
posted on 2017-12-08 13:49 lllomh 阅读(80) 评论(0) 编辑收藏举报