移動效果：
transform:translate(200px,100px);//不同瀏覽器還需要不同的適應
旋轉效果：
transform: rotate(180deg);
縮放效果：
transform:scale(1,2)//橫向不變，縱向放大2倍
傾斜效果：
transform：skew(50deg,50deg)
過渡：
通過使用CSS3，可以給元素添加一些效果，CSS3過渡是元素從一種樣式轉換成另一種樣式（動畫效果的CSS，動畫執行的時間）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: blue; transition:width 2s,height 2s,transform 2s; transition-delay: 2s;//延時兩秒實現效果 } div:hover{ width: 200px; height: 200px; transform: rotate(360deg); } </style> </head> <body> <div> </div> </body> </html>
動畫：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: red; position: relative; animation: anim 5s infinite alternate; } @keyframes anim{ 0%{background: red; left:0px; top: 0px; } 25%{background: blue; left:200px; top: 0px; } 50%{background: #40ff50; left:200px; top: 200px; } 75%{background: #ff3ff6; left:0px; top: 200px; } 100%{background: #ff121a; left:0px; top: 0px; } } @-webkit-keyframes anim { 0%{background: red; left:0px; top: 0px; } 25%{background: blue; left:200px; top: 0px; } 50%{background: #40ff50; left:200px; top: 200px; } 75%{background: #ff3ff6; left:0px; top: 200px; } 100%{background: #ff121a; left:0px; top: 0px; } } </style> </head> <body> <div> </div> </body> </html>
多列：
.div1{ column-count: 3; column-gap: 50px; column-rule: 5px outset red; }
瀑布流效果
<style type="text/css">
.container{
column-width: 250px;
column-gap: 5px;
}
.container div{
width: 250px;
margin: 5px 0;
border: 1px solid red;
}
column-width: 250px;
column-gap: 5px;
}
.container div{
width: 250px;
margin: 5px 0;
border: 1px solid red;
}
</style>
<div class="container">
<div><img src=""></div>
<div><img src=""></div>
......
</div>