原理
利用js获取鼠标指针位置，根据位置计算偏转角度，通过设定css中transform的perspective/rotateX/rotateY使banner呈现3d偏转的效果。
步骤
首先，写一个div
<div id="banner"></div>
并给他一些基本的样式
#banner{
width: 1000px;
height: 400px;
background-color: steelblue;
margin: 50px auto;
border-radius: 10px;
border: 1px solid silver;
}
接下来引入vue
<script src="https://unpkg.com/vue/dist/vue.js"></script>
并生成一个实例
new Vue({
el: '#panel',
})
在data中定义x轴和y轴的偏转角度
data() {
return {
angleX: 0,
angleY: 0,
}
},
在computed计算属性中定义生成具体css语句的函数
computed: {
generateTransform() {
return `perspective(3000px) rotateX(${this.angleX}deg) rotateY(${this.angleY}deg)`;
},
},
在methods中书写鼠标在banner中的移动事件对应的函数
move(e) {
let halfWidth = e.target.scrollWidth / 2;
let halfHeight = e.target.scrollHeight / 2;
// 获取banner高度和宽度一半的值，也就是banner的中心x轴和中心y轴的相对于banner顶端和左端的偏移值
let mouseX = e.pageX - e.target.offsetLeft;
let mouseY = e.pageY - e.target.offsetTop;
// 获取鼠标指针相对于banner的偏移值(用鼠标相对于页面的偏移值减去banner相对于页面的偏移值)
let offsetX = halfWidth - mouseX;
let offsetY = halfHeight - mouseY;
// 计算鼠标相对于banner中心轴的偏移量
let percentX = offsetX / halfWidth;
let percentY = offsetY / halfHeight;
// 计算偏移的百分比数(鼠标偏移量除以最大偏移量)
this.angleX = percentY * 10;
this.angleY = -percentX * 10;
// 计算偏转角度并给data赋值(百分比数乘以最大偏转角度数，这里设为10度)
},
定义鼠标离开banner事件对应的函数(也就是将data中角度值归零)
leave(e) {
this.angleX = 0;
this.angleY = 0;
}
接下来，为banner绑定相应的事件和样式
<div id="panel"
:style="{ transform: generateTransform }"
v-on:mousemove="move(this.event)"
v-on:mouseleave="leave(this.event)"
></div>
此时，发现效果已经基本实现，为了让鼠标离开时banner恢复原状的过程更加平缓，要给banner加入transition
transition: transform 0.3s linear;
// 这里timing-function要定义为linear,默认的ease在鼠标连续移动时会造成偏转效果断续
大功告成了，预览。
不过我发现，锤子官方商城的效果中，banner内的文字和背景偏转角度有一定差异，感觉像不在一个平面上，我猜测应该是利用了不同的perspective，有机会我再测试一下。
