实现例如锤子手机官网的3DHover效果

思路

1. 在mouseover的时候通过event获得鼠标的位置
2. 让div随着鼠标实现轻微rotate效果

实现

// HTML
  <div id="parent">
    <div id="root">banner</div>    
  </div>
// JS
  <script>
    $('#root'). on('mousemove', e => {
      const pos = $('#parent').offset()
      const x = e.pageX - pos.left
      const y = e.pageY - pos.top
      const centerX = $('#parent').innerWidth()/2
      const centerY = $('#parent').innerHeight()/2
      const deg = 10
      const degX = (x - centerX)/centerX * deg
      const degY = - (y - centerY)/centerY * deg
      $('#root').css({
        transform: `rotateX(${degY}deg) rotateY(${degX}deg)`  
      })
    })
  </script>

// CSS
#root {
  text-align: center;
  line-height: 200px;
  font-size: 30px;
  height: 200px;
  background-color: #00f;
  transition: transform .1s;
}
#parent {
  perspective: 1000px;
  margin-top: 100px;
}

值得注意的细节

1. perspective属性
   视点与div的距离, 可以抽象理解为电影院的最后一排与第一排的区别, 离得越近, 同样rotate的角度看起来更倾斜, 注意这个属性使用在父元素上作用在子元素上
2. offsetX, offsetY
   会返回相对于最近div的坐标, 所以要算出正确的鼠标在div中的位置需要使用pageX, pageY减去div的offsetX(使用jQuery)
3. rotate的方向
   当鼠标在左边即在X轴移动的时候, rotate的是Y轴的平面, 从中心到边界, Y轴的方向从下往上看应该是逆时针方向, 但是rotateY正数是顺时针, 所以需要加上负号