鼠标滑入 3D倾斜效果

有去过锤子科技的官网嘛？锤子官网的banner轮播是有一个3D倾斜效果的，看起来着实炫酷。
想看效果就戳进来吧！http://www.smartisan.com/#/shop

自己也常识撸了一段效果代码：

• CSS

 *{
    margin: 0;
    padding: 0;
  }

  body{
    padding-top: 40px;
  }

  div#banner-wrap{
    width: 1100px;
    height: 500px;
    margin: 0 auto;
    background: white;
    perspective: 1000px;
  }

  #banner{
    width: 1100px;
    height: 500px;
    color: #fff;
    margin: 0 auto;
    font-size: 50px;
    text-align: center;
    line-height: 500px;
    border-radius: 15px;
    background: #9393FF;
    transition: transform 0.2s linear;
    box-shadow: 0 0 15px rgba(0,0,0,0.25);
  }

• HTML

<div id="banner-wrap">
    <div id="banner">3D倾斜</div>
</div>

• JavaScript

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">

        $('#banner-wrap').on('mousemove', function(e){

            var offset = $(this).offset();

            var x = e.pageX - offset.left,
                y = e.pageY - offset.top;

            var centerX = $(this).outerWidth() / 2,
                centerY = $(this).outerHeight() / 2;

            var deltaX = x - centerX,
                deltaY = y - centerY;

            var percentX = deltaX / centerX,
                percentY = deltaY / centerY;

            var deg = 3;

            $('#banner').css({
                'transform' : 'rotateX(' + deg * (-percentY) + 'deg)' + 
                'rotateY(' + deg * percentX + 'deg)'
                })
            })

            $('#banner-wrap').on('mouseleave', function(){
                $('#banner').css({
                    'transform' : ''
                })
            })
</script>

效果自己撸完代码看吧！