CSS3 Transform 變形效果 – 3D 篇

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

CSS 語法 - 網頁設計  - CSS3 Transform 變形效果 - 3D 篇 - 011

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

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 轉場動畫效果的觀念不清楚的話,請再回去複習一番喔!正所謂~一回生,二回熟!熟透了就是您的了!!

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

Step 1.

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

CSS 語法 - 網頁設計  - CSS3 Transform 變形效果 - 3D 篇 - 021

Step 2.

再為此區塊撰寫 Transition 效果。

CSS 語法 - 網頁設計  - CSS3 Transform 變形效果 - 3D 篇 - 031

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

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , , , , , .

迴響已被關閉。