锤子手机官网的3d悬浮效果
2017-02-15 本文已影响0人
王康_Wang
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: ''
})
})
