1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>斜切效果</title> 6 <style type="text/css"> 7 #div1{ 8 width: 200px; 9 height: 100px; 10 background: green; 11 margin: 100px auto; 12 /*transition: all 2s ease 0s; 13 all:是一个默认值; 14 2s:表示变化在2秒内完成; 15 ease:一般是默认值; 16 0s:表示延时多久; 17 */ 18 transition: all 0.8s; 19 20 } 21 #div1:hover{ 22 /* 23 24 */ 25 transform: skewX(20deg); 26 } 27 </style> 28 </head> 29 <body> 30 <div id="div1"></div> 31 </body> 32 </html>