利用平移（transform），设置元素浮动效果

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>变形</title>
 6         <style>
 7             
 8             .box1{
 9                 width: 200px;
10                 height: 200px;
11                 margin-top: 100px;
12                 background-color: #bfa;
13                
14                transition: all .2s;
15                 
16             }
17             
18             .box1:hover{
19                 transform: translateY(-10px);
20                 box-shadow: rgba(0,0,0,.3) 0 10px 10px;
21             }
22 
23             
24         </style>
25     </head>
26     <body>
27         
28         <div class="box1"></div>
29         
30     </body>
31 </html>

内容

1.利用transform: translateY(-10px); box-shadow: rgba(0,0,0,.3) 0 10px 10px; 即可设置元素向上浮动的效果

2.变形，通过变形可以对元素进行平移、放大、缩小旋转等操作，所有的变形效果，都不会影响页面的布局，这是元素的外观发生变化