iT邦幫忙

DAY 5
0

Flash掰掰!? 不想放棄的囧MD系列 第 5

CSS3 transform來模擬Flash般的動畫(二) - Flash(05)

  • 分享至 

  • xImage
  •  

今天發文時間有點早~因為有兩天不在家+沒電腦的關係~~囧"

只好先發部分文章,之後會再把這篇補齊。

transform 的動畫類型

上一篇講到,我們可以用 transform 來做滑鼠移入後的動畫效果,

那這篇要來稍微講一下 transform 以及 transition 的一些可以設定的參數,

先來說說 transform 的部分~(以下都是套用 類型(數值); 的公式唷 )

  1. translateX(Y): 上一篇用到的功能之一,可以向 X(Y) 軸做移動,
    如果要同時做兩邊的話,可以用 translate( X軸數值 , Y軸數值 );
  2. rotate:也是上一篇用到,讓作用物件旋轉,有點值得一提的是~
    旋轉的數值要加上單位,例如: transform: rotate( 度數+deg );
  3. skewX(Y):這是讓物件傾斜,分為 X 與 Y 軸方向,
    跟translate一樣可以同時使用,例如:skew( X軸數值 , Y軸數值 );
  4. scaleX(Y):縮放功能,讓物件向 X 或 Y 軸做"倍數"縮放,
    一樣可以同時兩方向 scale( X軸數值 , Y軸數值 );
    但如果使用 scale( 數值 ); 的話,就代表是該物件等比縮放倍數。
  5. matrix 本人還沒用過,之後若會在後續補上~(偷懶)

今天先打到這邊,等星期一再繼續補齊,謝謝~~


上一篇
CSS3 transform來模擬Flash般的動畫(一) - Flash(04)
下一篇
CSS3 transform來模擬Flash般的動畫(三) - Flash(06)
系列文
Flash掰掰!? 不想放棄的囧MD30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言