CSS3 Transform 變形效果 - 3D 篇

再來篇差不多的文章，同樣是換湯不換藥～當然還是要為各位解說一下 CSS3 Transform 的 3D 基本觀念。首先，我要先釐清一下軸線的方向：

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

3D CSS3 Transform

Google Chrome	Safari	Firefox	IE	Opera
12.0	4.0	10.0	10.0	12.0

當 CSS3 Transform 與 CSS3 Transition 的邂逅

再來個同時使用的效果，以呈現出與使用者互動式的感覺較為有趣。請點閱下方 Demo 按鈕看成品展示。

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

• Demo

---

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

Step 1.

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

Step 2.

再為此區塊撰寫 Transition 效果。

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