子標題：你需要知道的CSS3動畫技術 - 1
隨著網絡的發展，瀏覽器具有更強的渲染更高級代碼的能力，我們正逐步實現跨越所有平台和瀏覽器的目標。我們不但可以要花費更少的時間來確保我們的盒模型在IE6中看起來正常，而且形成了鼓勵創新、避免hack、重前端腳本的氛圍。
網絡是一個非常好的環境，也是一個有豐富的知識來分享的協作社區。我們想要有圓角，我們就實現了它；我們想要多背景圖片，我們實現了它；我們想要邊框圖片，我們也讓它實現了。所以需求從來不是問題，否則，我們可能還都仍然在使用table來佈局頁面而且使用過多的代碼呢。我們都知道，網絡無所不能。
CSS 3的屬性比如border-radius、box-shadow和text-shadow 在webkit(Safari、Chrome等)和Gecko(Firefox)等先進的瀏覽器中的使用開始出現增長的勢頭。它們(這些CSS屬性)已經為用戶創建更輕量的頁面和更豐富的體驗，而且它們可以優雅的降級。然而，這些只是CSS 3能為我們做的眾多事情中的一小部分。
在本文中，我們將走的更遠，看一看變形(transformation)、轉換(transition)和動畫(animation) 等更高級的CSS3技術。我們將涉及代碼本身、瀏覽器支持以及一些可以正確地展示這些新屬性是如何即提升你的設計又增強整體用戶體驗的例子。
CSS transformation是W3C的一個草案。但當我第一次坐下來閱讀它的全部特性以了解一些東西的時候，它並沒有讓我感到開竅。你可以想像的到，這個文檔是用技術術語的撰寫的，而且它更關注變形的圖形(比如繪圖)元素和矩陣。大一學習微積分之後就沒有碰過矩陣了，我必須為本章節做很多好的舊瀏覽器測試以及猜測和檢驗。
在看完我能找到的每一個教程和大量的瀏覽器測試之後，我總結出一些大家都能從中獲益的有用的關於CSS變形的信息。
transform屬性實現了一些可用SVG實現的同樣的功能。它可用於內聯(inline)元素和塊級(block)元素。它允許我們旋轉、縮放和移動元素——只需要一行CSS代碼。
一些前衛設計的最大詬病就是文字不可選(必須要使用切圖的方法實現)。當你熟練使用transform屬性來控製文字的時候，這就不再是問題了，因為這是個純CSS方法，所以元素內的文字會保持可選。這是CSS相對於使用圖片(或背景圖片)的一個巨大優勢。
一些有趣而有用的變形功能：
‧rotate
Rotate(旋轉)允許你通過傳遞一個度數值來轉動一個對象。
‧scale
Scale是一個縮放功能，可以讓任一元素變的更大。它使用正數和負數以及小數作為參數。
‧translate
Translate就是基於X和Y 坐標重新定位元素
‧skew
顧名思義，skew就是要將對象傾斜，參數是度數
‧matrix
transform支持矩陣變換，就是基於X和Y 坐標重新定位元素
下面讓我們更深入的了解每一個功能吧。
transform屬性有很多用法，其中一個就是translate(旋轉)。 translate就是基於角度轉動一個對象並可用於內聯元素和塊級元素，它可以實現很酷的效果。
請注意在IE8中(非標準模式)它需要你寫成“-ms-filter”而不是“filter”。
瀏覽器支持
瀏覽器對translate的支持令人驚奇的廣泛。在上面的CSS片段中，我們直接加上-webkit-和-moz-前綴然後將#nav元素旋轉-90度。
相當簡單吧？唯一的問題是對於一個相當重要的設計元素，如果IE不支持，很多設計師就會不情願使用它。
幸運的是，IE有這方面的濾鏡:圖形旋轉濾鏡。它可以有4個旋轉值：0, 1, 2,和3。你將不會獲得和Webkit和Gecko一樣的精密控制，但是至少在一定程度上保持統一(甚至IE6)。雖然這個濾鏡只支持4個值，顯得有些雞肋，但是對於IE來說，聊勝於無吧。
scale並不像你想像的那樣工作：簡單的縮小和放大一個元素。縮放功能同時採用寬和高兩個值，這些值可以是正數、負數和小數。
正數值放大一個元素，正如你期望的那樣，基於指定的寬度和高度。
負數值並不會縮小元素，而是翻轉它(比如，文字被反轉)然後相應的縮放它。然而，你可以使用小於1的小數(例如.5)來收縮或者縮小一個元素。
瀏覽器支持
scale屬性目前只有Firefox, Safari 和Chrome支持，到目前為止沒有一個IE版本支持。縮放一個對像是相當有意義的設計選擇。它可以通過漸進增強來使用:hover，這可以在你的導航上添加一個小小的趣味。
網絡是一個非常好的環境，也是一個有豐富的知識來分享的協作社區。我們想要有圓角，我們就實現了它；我們想要多背景圖片，我們實現了它；我們想要邊框圖片，我們也讓它實現了。所以需求從來不是問題，否則，我們可能還都仍然在使用table來佈局頁面而且使用過多的代碼呢。我們都知道，網絡無所不能。
為網絡而生
CSS 3的屬性比如border-radius、box-shadow和text-shadow 在webkit(Safari、Chrome等)和Gecko(Firefox)等先進的瀏覽器中的使用開始出現增長的勢頭。它們(這些CSS屬性)已經為用戶創建更輕量的頁面和更豐富的體驗，而且它們可以優雅的降級。然而，這些只是CSS 3能為我們做的眾多事情中的一小部分。
在本文中，我們將走的更遠，看一看變形(transformation)、轉換(transition)和動畫(animation) 等更高級的CSS3技術。我們將涉及代碼本身、瀏覽器支持以及一些可以正確地展示這些新屬性是如何即提升你的設計又增強整體用戶體驗的例子。
CSS 變形(Transformation)
CSS transformation是W3C的一個草案。但當我第一次坐下來閱讀它的全部特性以了解一些東西的時候，它並沒有讓我感到開竅。你可以想像的到，這個文檔是用技術術語的撰寫的，而且它更關注變形的圖形(比如繪圖)元素和矩陣。大一學習微積分之後就沒有碰過矩陣了，我必須為本章節做很多好的舊瀏覽器測試以及猜測和檢驗。
在看完我能找到的每一個教程和大量的瀏覽器測試之後，我總結出一些大家都能從中獲益的有用的關於CSS變形的信息。
transform
transform屬性實現了一些可用SVG實現的同樣的功能。它可用於內聯(inline)元素和塊級(block)元素。它允許我們旋轉、縮放和移動元素——只需要一行CSS代碼。
一些前衛設計的最大詬病就是文字不可選(必須要使用切圖的方法實現)。當你熟練使用transform屬性來控製文字的時候，這就不再是問題了，因為這是個純CSS方法，所以元素內的文字會保持可選。這是CSS相對於使用圖片(或背景圖片)的一個巨大優勢。
一些有趣而有用的變形功能：
‧rotate
Rotate(旋轉)允許你通過傳遞一個度數值來轉動一個對象。
‧scale
Scale是一個縮放功能，可以讓任一元素變的更大。它使用正數和負數以及小數作為參數。
‧translate
Translate就是基於X和Y 坐標重新定位元素
‧skew
顧名思義，skew就是要將對象傾斜，參數是度數
‧matrix
transform支持矩陣變換，就是基於X和Y 坐標重新定位元素
下面讓我們更深入的了解每一個功能吧。
Rotate
transform屬性有很多用法，其中一個就是translate(旋轉)。 translate就是基於角度轉動一個對象並可用於內聯元素和塊級元素，它可以實現很酷的效果。
#nav{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
請注意在IE8中(非標準模式)它需要你寫成“-ms-filter”而不是“filter”。
瀏覽器支持
瀏覽器對translate的支持令人驚奇的廣泛。在上面的CSS片段中，我們直接加上-webkit-和-moz-前綴然後將#nav元素旋轉-90度。
相當簡單吧？唯一的問題是對於一個相當重要的設計元素，如果IE不支持，很多設計師就會不情願使用它。
幸運的是，IE有這方面的濾鏡:圖形旋轉濾鏡。它可以有4個旋轉值：0, 1, 2,和3。你將不會獲得和Webkit和Gecko一樣的精密控制，但是至少在一定程度上保持統一(甚至IE6)。雖然這個濾鏡只支持4個值，顯得有些雞肋，但是對於IE來說，聊勝於無吧。
scale
scale並不像你想像的那樣工作：簡單的縮小和放大一個元素。縮放功能同時採用寬和高兩個值，這些值可以是正數、負數和小數。
正數值放大一個元素，正如你期望的那樣，基於指定的寬度和高度。
負數值並不會縮小元素，而是翻轉它(比如，文字被反轉)然後相應的縮放它。然而，你可以使用小於1的小數(例如.5)來收縮或者縮小一個元素。
#nav {
/* nav元素的寬和高都會被放大雙倍 */
-webkit-transform: scale(2);
-moz-transform: scale(2); }
#nav {
/* nav元素的寬會是雙倍，而高度保持不變*/
-webkit-transform: scale(2, 1);
-moz-transform: scale(2, 1);
}
#nav {
/* nav的寬度將是雙倍，並且水平翻轉，但是高度保持不變*/
-webkit-transform: scale(-2, 1);
-moz-transform: scale(-2, 1);
}
瀏覽器支持
scale屬性目前只有Firefox, Safari 和Chrome支持，到目前為止沒有一個IE版本支持。縮放一個對像是相當有意義的設計選擇。它可以通過漸進增強來使用:hover，這可以在你的導航上添加一個小小的趣味。
#nav li a:hover{
/* 這可以讓你的導航鏈接在鼠標經過的時候輕微的放大 */
-webkit-transform: scale(1.1); -moz-transform: scale(1.1);
}
