* { 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的悬浮效果
详细的解释我已经写在代码的注释里面了。