(function(){ var bannerWrap = document.querySelector('.top1'), banner = bannerWrap.querySelector('.big_img'); banner.addEventListener('mousemove', function(e){ this.style.transition = ''; var centerX = banner.offsetLeft + banner.offsetWidth / 2, //div中心点到页面左边距离 centerY = banner.offsetTop + banner.offsetHeight / 2; var deltaX = e.pageX - centerX, deltaY = e.pageY - centerY; var percentageX = deltaX / centerX, //向左或向右的 偏差率 percentageY = deltaY / centerY; var deg = 20; //控制 偏差的 程度 this.style.transform = 'rotateX(' + percentageY * deg + 'deg)' + 'rotateY(' + percentageX * deg + 'deg) translateZ(30px)'; }); banner.addEventListener('mouseleave', function(e){ this.style.transform = 'rotateX(0) rotateY(0) translateZ(0px)'; this.style.transition = 'all 0.2s linear'; }) })();