CSS3漸變、過渡、轉換、動畫
. 過渡
transition CSS 屬性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一個簡寫屬性。
CSS3漸變的分類
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
徑向漸變（radial-gradient）- 由它們的中心定義
1、從上到下
下面的例項演示了從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色：
#grad{background-image:linear-gradient(#e66465, #9198e5); }
2、從左到右
下面的例項演示了從左邊開始的線性漸變。起點是紅色，慢慢過渡到藍色：
#grad{
height:200px; background-image:linear-gradient(to right, red, yellow);
}
3、對角
下面的例項演示了從左上角開始（到右下角）的線性漸變。起點是紅色，慢慢過渡到藍色：
#grad{
height:200px; background-image:linear-gradient(to bottomright, red, yellow);
}
4、對角使用多個顏色結點
帶有多個顏色結點的從上到下的線性漸變：
#grad{background-image:linear-gradient(red, yellow, green); }
使用透明度（transparent）
從左到右的線性漸變，帶有透明度：
#grad{background-image:linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }
CSS3 徑向漸變
1、顏色結點均勻分佈（預設情況下）
#grad{background-image:radial-gradient(red, yellow, green); }
2、顏色結點不均勻分佈
#grad{background-image:radial-gradient(red5%, yellow15%, green60%); }
3、設定形狀
shape 引數定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。預設值是 ellipse。
#grad{background-image:radial-gradient(circle, red, yellow, green); }
(3)translate() 方法
div{transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}translate值（50px，100px）是從左邊元素移動50個畫素，並從頂部移動100畫素。
(3)rotate() 方法
rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
div{transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}rotate值（30deg）元素順時針旋轉30度。
transform-origin:righttop; 設定旋轉軸心
(4)、scale() 方法
ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 標準語法 */
scale（2,3）轉變寬度為原來的大小的2倍，和其原始大小3倍的高度。
(5)、skew() 方法
div{transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}
skew(30deg,20deg) 元素在X軸和Y軸上傾斜20度30度。