仿照锤子科技官网的banner 3d效果

以前看到锤子科技官网的banner效果挺好玩的，一直没有研究；今天看到饥人谷，使用jquery给出了一种实现方式；我自己用原生js也实现了一遍。大致原理相同，但算法不同。

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

我的方法原理，如图所示，假设图中的小圆点是中心点；e的位置为事件发生的位置。在水平方向上，deltaX/centerX就是元素要旋转的度数代码在最下方。

//html

    
banner

//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 = '';
        })    
})();