CSS沒有極限 - CSS transform 概觀

接下來要介紹CSS transform，CSS3許多新功能中，我認為transform和animation是相當有難度的，但也是最有趣的，尤其在兩者搭配後，能夠展現出類似過去flash的動態效果，但卻能保持html原有的互動性。

而在接下來的四至五天會分享transform相關的屬性運用。

transform概觀

本篇不會介紹以下範例的原始碼，主要會介紹transform有哪些特色，相關的原始碼會在後面的文章依序介紹。

增加網頁的動態視覺效果

過去的動態效果主要會以flash呈現，主因當然是因為html早期屬於靜態畫面呈現，如果說要吸引使用者的目光就會用些flash的效果；但在近幾年由於行動裝置的崛起，flash的應用在網頁上已經逐漸減少，如果要用動態效果可以來試試看transform吧

使動態更為流暢

動態效果除了CSS外，js也能夠達到，但其實js的動態效果也是基於CSS上，所以執行的效率上，還是CSS優於js。

CSS transform3D能夠開啟GPU硬體加速以提升效能(2013-12-25)。

3D的呈現

transform除了2D外，現在也有3D的效果(點擊以下方塊)。

有趣的視覺動態

不論是2D或是3D，都有著相當豐富的參數，在這些參數混合使用下，它能夠達到許多豐富的效果，我們可以試試看用這些有趣的效果來迷惑使用者的眼睛~。

不只有趣 還可以實用

說了那麼多，不如就慢慢地套用一些效果在我們的網站上吧。

這篇文章或許不長，但是Demo做超久的...，主要還是想讓大家知道transform有很多有趣的地方(還有順便準備後面章節的內容...)，這周就來一起研究transform吧~。