CSS3的缩放功能
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: 100px; 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.3s ease 0s; 19 20 } 21 #div1:hover{ 22 /* 23 scale():XY同时变化; 24 scaleX():X变化Y不变; 25 scaleY():Y变化X不变; 26 scale(2,3):X2倍变化Y3倍变化; 27 */ 28 transform: scale(1.1); 29 } 30 </style> 31 </head> 32 <body> 33 <div id="div1"></div> 34 </body> 35 </html>