CSS3
2d之变形 平移 缩放 旋转 倾斜
3d
伸缩布局
02-2D变形.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 140px; height: 140px; background-color: green; transition: all 1s; } div:active { /*变形 移动*/ /* transform: translateX(1000px); */ /* transform: translateY(100px); */ /* transform: translate(200px); *//*一个数字表示x轴*/ transform: translate(200px,100px); } </style> </head> <body> <div> </div> </body> </html>
03绝对定位的盒子水平居中.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 400px; height: 200px; background: red; position: absolute; left: 50%; /*参考父亲的宽度*/ top: 50%; /* margin-left: -100px; */ /*下面的百分比以自己的盒子做参考*/ transform: translate(-50%,-50%); } </style> </head> <body> <div></div> </body> </html>