[转载]锤子官网的 banner 的 3D 悬浮效果

最新推荐文章于 2025-01-21 09:29:21 发布

转载最新推荐文章于 2025-01-21 09:29:21 发布 · 2.1k 阅读

文章标签：

#3d

css 同时被 3 个专栏收录

5 篇文章

订阅专栏

html

4 篇文章

订阅专栏

2 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及jQuery实现的响应鼠标移动的3D旋转Banner效果。通过CSS设置元素样式，并利用jQuery监听鼠标移动事件，计算偏移角度，使Banner随鼠标位置动态变化，呈现立体翻转视觉体验。

css 代码

*{box-sizing: border-box;}
div#test{
  width: 100%;
  height: 500px;
  background: white;
  padding: 100px 0; 
  margin: 100px auto;
  border: 1px solid #ddd;

  perspective: 1000px;
}

#banner{
  height: 300px;
  width: 400px;
  margin: 0 auto;
  background:  #37D7B2;
  transition: transform 0.1s;
  box-shadow: 0 0 15px rgba(0,0,0,0.25);
  text-align: center;
  line-height: 300px;
  font-size: 50px;
  color: #fff;
}

body{
  background: white;
  padding: 20px;
}

html代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

  <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
  var 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: ''
  })
})

转载自前端开发指南：https://zhuanlan.zhihu.com/p/24177270