CSS3 教學 Transform 變形效果 – 2D 篇

嗯~就叫它「變形效果」吧!

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

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

2D CSS3 Transform
Google ChromeSafariFirefoxIEOpera
1.03.23.59.010.5

CSS3 Transform 基本變形

首先,先介紹一下 CSS3 Transform 的一些簡單的基本控制:

Transform 常用的屬性值:

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

CSS 教學 - 網頁排版  - CSS3 教學 Transform 變形效果 - 2D 篇 - 01

當 CSS3 Transform 與 CSS3 Transition 的邂逅

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

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

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

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

Step 1.

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

CSS 教學 - 網頁排版  - CSS3 教學 Transform 變形效果 - 2D 篇 - 02

Step 2.

再為此區塊撰寫 Transition 效果。

CSS 教學 - 網頁排版  - CSS3 教學 Transform 變形效果 - 2D 篇 - 03

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

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

posted in CSS 教學 - 網頁排版 and tagged , , , , .

留言功能已關閉。