1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .box{ 8 width: 100px; 9 height: 100px;10 background-color: gold;11 margin: 50px auto 0;12 transition: all 0.5s ease 0s; /* 同时加入动画效果 */13 }14 15 .box:hover{16 /* transform位移比定位位移的性能更高，因为其不影响整体布局，建议使用transform位移 */17 transform: skew(45deg); /* x轴斜切45度 */18 transform: skew(0,45deg); /* y轴斜切45度 */19 }20 </style>21 </head>22 <body>23 <div class="box"></div>24 </body>25 </html>
