使用vue作出锤子官方商城的3d-banner效果

原理

利用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，有机会我再测试一下。