CSS3
2d之变形 平移 缩放 旋转 倾斜
3d
伸缩布局
04-2D变形之缩放.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 100px; height: 100px; background-color: blue; margin: 50px auto; transition: all 1s; } div:hover { transform: scale(2); } section { width: 150px; height: 150px; margin: 0 auto; overflow: hidden; } section img { transition: all 1s; /*过渡 谁要做动画 谁加过渡*/ } section:hover img { transform: scale(1.2); } </style> </head> <body> <div></div> <section> <img src="img/img.jpg" alt=""> </section> </body> </html>