在 CSS3 中再加入了 Transform 效果囉!此屬性可產生一些簡單的 2D 變形如縮放、旋轉、傾斜。此外,更可產生 3D 的變形,這...真的是太強悍啦!
在高興的同時別忘了~並不是所有的瀏覽器都有支援!請各位還是以先進的瀏覽器以進行檢視吧!
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 轉場動畫效果的觀念不清楚的話,請再回去複習一番喔!正所謂~一回生,二回熟!熟透了就是您的了!!
廢話不多說了~請看以下解說~
沒有留言 :
張貼留言