android banner阴影,仿照锤子科技官网的banner 3d效果

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

我的方法原理，如图所示，假设图中的小圆点是中心点；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 = '';

})

})();