3DHover效果

weixin_33785972發表於2016-12-05
3D

實現例如錘子手機官網的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正數是順時針, 所以需要加上負號

相關文章