css3實現顏色漸變、元素的2D轉換(元素的旋轉，縮放，移動，傾斜等)、元素轉換過渡效果
一、顏色漸變：background: linear-gradient(direction, color-stop1, color-stop2, ...);
引數：direction: 方向或者角度； color-stop1, color-stop2, ... ：指定漸變的起止顏色，可以使用rgba()函式設定透明色。
例：<button class="button"></button>
.button{
/* Safari 5.1 - 6.0 */
background: -webkit-linear-gradient(left, orange, yellow);
/* Opera 11.1 - 12.0 */
background: -o-linear-gradient(right, orange, yellow);
/* Firefox 3.6 - 15 */
background: -moz-linear-gradient(right, orange, yellow);
/* 標準的語法（必須放在最後） */
background: linear-gradient(to right, orange, yellow);
}
二、元素的2D轉換：transform
1. matrix(n,n,n,n,n,n): 定義 2D 轉換，使用六個值的矩陣。
2. translate(x,y)：定義 2D移動轉換。可只在X或Y軸進行位置變換(translateX(x
相容：
-ms-transform: translate(x,y);
-webkit-transform: translate(x,y);
-o-transform: translate(x,y);
-moz-transform: translate(x,y);
例：垂直居中
<div class='father'><div class='child'>child</div></div>
.father{width: 100px; height: 100px; border:1px solid #000000}
.child{ position:relative; top: 50%; transform: translateY(-50%)}
3. scale(x,y)：定義 2D 縮放轉換。可只在X或Y軸定義縮放轉換(scaleX(x)、scaleY(y))。
4. rotate(angle)：定義 2D 旋轉，在引數中規定角度。可只沿X或Y軸定義旋轉(rotateX(angle)、rotateY(angle))。
例：<div class="rotate">rotate</div>
.rotate{
/* Internet Explorer */
-ms-transform: rotate(180deg);
/* Firefox */
-moz-transform: rotate(180deg);
/* Safari 和 Chrome */
-webkit-transform: rotate(180deg);
/* Opera */
-o-transform: rotate(180deg);
/* 標準 */
transform: rotate(180deg);
}
5. skew(x-angle,y-angle): 定義沿著 X 和 Y 軸的 2D 傾斜轉換。可只沿X或Y軸定義2D傾斜轉換(skewX(angle)、skewY(angle))。
三、過渡效果：transition
transition 屬性是一個簡寫屬性，用於設定四個過渡屬性：
- transition-property: 規定設定過渡效果的 CSS 屬性的名稱。(transform、height、width等等)
- transition-duration: 規定完成過渡效果需要多少秒或毫秒。
- transition-timing-function: 規定速度效果的速度曲線。[ linear: 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）; ease: 規定慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）; ease-in: 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）; ease-out: 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）; ease-in-out: 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）; cubic-bezier(n,n,n,n): 在 cubic-bezier 函式中定義自己的值。可能的值是 0 至 1 之間的數值。
- transition-delay: 定義過渡效果何時開始。
註釋：請始終設定 transition-duration 屬性，否則時長為 0，就不會產生過渡效果。
例：<div class="trans">height</div>
.trans {
height: 30px;
width: 100px;
/* Internet Explorer */
-ms-transition: height 2s ease-out;
/* Firefox */
-moz-transition: height 2s ease-out;
/* Safari 和 Chrome */
-webkit-transition: height 2s ease-out;
/* Opera */
-o-transition: height 2s ease-out;
/* 標準 */
transition: height 2s ease-out;
}
.trans:hover{ height: 100px; }