锤子手机官网的3d悬浮效果

CSS:

*{
      box-sizing: border-box;
    }
    #test {
      position: relative;
      width: 1100px;
      height: 600px;
      background: #fff;
      padding: 100px 0;
      margin: 50px auto;
      border: 1px solid #ddd;
      perspective: 1000px;
    }
    #banner {
      height: 400px;
      width: 900px;
      margin: 0 auto;
      background: #37d7b2;
      transition: transform .1s;
      box-shadow: 0 0 15px rgba(0,0,0,.25);
      text-align: center;
      line-height: 400px;
      font-size: 80px;
      color: #fff;
    }
    body {
      background: #ddd;
      padding: 20px;
    }

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3d-hover</title>
</head>
<body>
  <div id="test">
    <div id="banner">banner</div>
  </div>
</body>
</html>

JS:

  $('#test').on('mousemove', function(e) {
    var offset = $('#test').offset();
    var x = e.pageX - offset.left,
        y = e.pageY - offset.top;

    var centerX = $('#test').outerWidth() /2;
    var centerY = $('#test').outerHeight() /2;

    var deltaX = x - centerX;
    var deltaY = y - centerY;

    var percentX = deltaX / centerX;
    var percentY = deltaY / centerY;

    var deg = 10;

    $('#banner').css({
      transform: 'rotateX(' + deg*-percentY + 'deg)' + 'rotateY(' + deg*percentX + 'deg)'
    })
  })

  $('#test').on('mouseleave', function(){
    $('#banner').css({
      transform: ''
    })
  })

最后编辑于：2017.12.05 19:08:17

锤子手机官网的3d悬浮效果

推荐阅读更多精彩内容