iT邦幫忙

DAY 23
5

CSS沒有極限系列 第 19

CSS沒有極限 - CSS transform 概觀

  • 分享至 

  • xImage
  •  

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-08 (建議使用Chrome瀏覽器)

接下來要介紹CSS transform,CSS3許多新功能中,我認為transform和animation是相當有難度的,但也是最有趣的,尤其在兩者搭配後,能夠展現出類似過去flash的動態效果,卻能保持html原有的互動性。

而在接下來的四至五天會分享transform相關的屬性運用。

接下來要介紹CSS transform,CSS3許多新功能中,我認為transform和animation是相當有難度的,但也是最有趣的,尤其在兩者搭配後,能夠展現出類似過去flash的動態效果,卻能保持html原有的互動性。

而在接下來的四至五天會分享transform相關的屬性運用。

transform概觀
本篇不會介紹以下範例的原始碼,主要會介紹transform有哪些特色,相關的原始碼會在後面的文章依序介紹。

增加網頁的動態視覺效果

過去的動態效果主要會以flash呈現,主因當然是因為html早期屬於靜態畫面呈現,如果說要吸引使用者的目光就會用些flash的效果;但在近幾年由於行動裝置的崛起,flash的應用在網頁上已經逐漸減少,如果要用動態效果可以來試試看transform吧

使動態更為流暢

動態效果除了CSS外,js也能夠達到,但其實js的動態效果也是基於CSS上,所以執行的效率上,還是CSS優於js。

3D的呈現
transform除了2D外,現在也有3D的效果。

有趣的視覺動態

不論是2D或是3D,都有著相當豐富的參數,在這些參數混合使用下,它能夠達到許多豐富的效果,我們可以試試看用這些有趣的效果來迷惑使用者的眼睛~。

不只有趣 還可以實用

說了那麼多,不如就慢慢地套用一些效果在我們的網站上吧。

這篇文章或許不長,但是Demo做超久的...,主要還是想讓大家知道transform有很多有趣的地方(還有順便準備後面章節的內容...),這周就來一起研究transform吧~。


上一篇
CSS沒有極限 - Checkbox的妙用
下一篇
CSS沒有極限 - CSS transform 軸線的謊言
系列文
CSS沒有極限41
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0

我要留言

立即登入留言