* {
box-sizing:border-box;
margin:0;
padding:0;
}
div#test {
width:100%;
height:970px;
background:white;
border:1px solid #ddd;
perspective:1000px;
}
#banner {
height:300px;
width:400px;
margin:0 auto;
position:absolute;
left:18%;
top:15%;
/* margin-top:-150px;
margin-left:-200px;
*/
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;
}
鼠标远离或接近div,div会有种3d的悬浮效果
详细的解释我已经写在代码的注释里面了。