之前看到锤子科技官网的banner结果挺好玩的，一向没有研究；本日看到饥人谷，运用jquery给出了一种完成体式格局；我本身用原生js也完成了一遍。大抵道理雷同，但算法差别。

饥人谷源码地点：http://js.jirengu.com/negor/4…。

我的要领道理，如图所示，假定图中的小圆点是中心点；e的位置为事宜发作的位置。在程度方向上，deltaX/centerX就是元素要扭转的度数代码在最下方。

//html
<div class="banner-wrap">
    <div class="banner">banner</div>
</div>

//css
.banner-wrap{
    height: 900px;
    outline: 1px dash #eee;
    padding: 200px 0;
    perspective: 1000px;
}
.banner{
    width: 500px;
    margin: 0 auto;
    line-height: 500px;
    box-sizing: border-box;
    background-color:  #37D7B2;
    text-align: center;
    line-height: 500px;
    font-size: 50px;
    color: #fff;
}

;(function(){
    var bannerWrap = document.querySelector('.banner-wrap'),
        banner = bannerWrap.querySelector('.banner');
        banner.addEventListener('mousemove', function(e){
            var centerX = banner.offsetLeft + banner.offsetWidth / 2,
                centerY = banner.offsetTop + banner.offsetHeight / 2;        
            var deltaX = e.pageX - centerX,
                deltaY = e.pageY - centerY;
            var percentageX = deltaX / centerX,
                percentageY = deltaY / centerY;
            var deg = 10;
            this.style.transform = 'rotateX(' + percentageY * -deg + 'deg)' 
                                    + 'rotateY(' + percentageX * deg + 'deg)';
        });
        banner.addEventListener('mouseleave', function(e){
            this.style.transform = '';
        })    
})();