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

来源：互联网发布：腾讯什么游戏优化编辑：程序博客网时间：2024/05/23 00:01

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

阅读全文

0 0