iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 9
0

菜菜菜的前端學習日誌 - Day9

transform 變形

transform顧名思義就是讓元素變形,夠過簡單的參數設定來使元素達到一般CSS屬性較難達到的樣式效果。

transform 屬性

常用的屬性如下:

  1. transform:設定變形的效果參數,參數主要有4類如下:
縮放 傾斜 旋轉 位移
scale() skew() rotate() translate()
scaleX() skewX() rotateX() translateX()
scaleY() skewY() rotateY() translateY()
rotateZ() translateZ()
  1. transform-origin:設定變形的基準點
  2. perspective-origin:設定透視的基準點
  3. perspective:設定透視的距離
  • X代表X軸,以左手比讚的手勢來模擬,大拇指向右的軸心就是X軸,大拇指的方向為正,相反為負

  • Y代表Y軸,以左手比讚的手勢來模擬,大拇指向下的軸心就是Y軸,大拇指的方向為正,相反為負

  • Y代表Y軸,以左手比讚的手勢來模擬,大拇指向自己的軸心就是Z軸,大拇指的方向為正,相反為負

Try It

知道參數之後就來藉由練習來熟悉吧~

我們先從skew()來練習

就直接讓一個DIV傾斜45度吧

結果就會是這樣

再來我們來練習旋轉

我們使用昨天練習的圖片來做

我們使用rotate()來讓圖片旋轉90度

結果就會是這樣,上面是原圖,下面是旋轉90度

而剩下的scale()translate()直接變形可能會比較沒有感覺
我們來透過一些事件來看看會比較明顯

就來練習scale()縮放吧

就讓圖片在hover時會變大2倍吧

scale()內填的是倍數,想要2倍就填2,想要1.5倍就填1.5

產生的結果就會是這樣

再來就是位移,我們想讓圖片在hover時向右位移20px

translate()內就填想要位移的距離

結果就會如下

transform的參數其實可以多個一起使用

如果搭配transition就會能夠產生許多不一樣的效果唷~

現在我們來讓圖片旋轉又變大這樣看起來應該會很酷!!

首先我們就加上transition轉場效果設1s,並在transform加上scale()及rotate()

結果就會是這樣,是不是很酷呢!!

但是只看一個圖片單調了點

我們來創建一個豐富一點的效果,我們一樣用hover來改變角大小及旋轉

我們用很多的li來呈現,程式碼如下

接下就來看看效果會是如何呢

WOW!! 看起來好貓啊(ㄋㄧㄠ)呀~
可能有人會很好奇為什麼元素變大了但是卻沒有跑版呀
因為transform並不會改變元素實際的大小,所以排版上並不會跑掉


上一篇
Transition轉場效果
下一篇
animation 動畫
系列文
菜菜菜的前端學習日誌30

尚未有邦友留言

立即登入留言