查看效果：
http://js.jirengu.com/negor/4/edit?html,output
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style> *{box-sizing: border-box;} div#test{ width: 100%; height: 500px; background: white; padding: 100px 0; margin: 100px auto; border: 1px solid; 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> </head> <body> <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)' }) }) </script> </body> </html>