为网络而生CSS变形Transformation.PDF

你需要知道的CSS3動畫技術 /modules/article/view.article.php/c2/232 Tim Wright /2009/12/19/what-you-need-to-know-about-behavioral-css/ 5月29日 譯文出處： 前端觀察 - /what-you-need ... about-behavioral-css.html 隨著網絡的發展，瀏覽器具有更強的渲染更高級代碼的能力，我們正逐步實現跨越所有平台和瀏覽器 的目標。我們不但可以要花費更少的時間來確保我們的盒模型在IE6中看起來正常，而且形成了鼓勵創 新、避免hack、重前端腳本的氛圍。 網絡是一個非常好 的環境，也是一個有豐富的知識來分 享的協作社區。我們想要有圓角 ，我們就實現了它；我們想要多背景圖片 ，我們實現了它；我們想要邊框圖片 ，我們也讓它實現了。所以需求從來不是問題，否則，我們可能還都仍然在使用table來佈局頁面而且 使用過多的代碼呢。我們都知道，網絡無所不能。 為網絡而生 CSS 3的屬性比如border-radius、box-shadow和text-shadow 在webkit(Safari、Chrome等)和Gecko(Fir efox)等先進的瀏覽器中的使用開始出現增長的勢頭。它們(這些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。