CSS3 Transform 變形效果 - 2D 篇

嗯～就叫它「變形效果」吧！

在 CSS3 中再加入了 Transform 效果囉！此屬性可產生一些簡單的 2D 變形如縮放、旋轉、傾斜。此外，更可產生 3D 的變形，這...真的是太強悍啦！

在高興的同時別忘了～並不是所有的瀏覽器都有支援！請各位還是以先進的瀏覽器以進行檢視吧！

2D CSS3 Transform

Google Chrome	Safari	Firefox	IE	Opera
1.0	3.2	3.5	9.0	10.5

CSS3 Transform 基本變形

首先，先介紹一下 CSS3 Transform 的一些簡單的基本控制： Transform 常用的屬性值：

• scale：縮放。 
• ratote：旋轉。 
• skew：傾斜。

當 CSS3 Transform 與 CSS3 Transition 的邂逅

如果單單只是用 CSS3 Transform 來製作些靜態變形或許不算什麼，甚至會有些無聊！

因此，我們再配合 CSS3 Transition 的轉場動畫效果，以呈現出與使用者互動式的感覺較為有趣。請點閱下方 Demo 按鈕看成品展示。

若對於 CSS3 Transition 轉場動畫效果的觀念不清楚的話，請再回去複習一番喔！正所謂～一回生，二回熟！熟透了就是您的了！！

• Demo

---

廢話不多說了～請看以下解說～

Step 1.

我們先撰寫好滑入時的 Transform 結果。

Step 2.

再為此區塊撰寫 Transition 效果。

還再看...已經解說完畢囉！！各位趕快去撰寫屬於自己的 CSS Play 吧！