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

transform 變形

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

transform 屬性

常用的屬性如下：

1. transform：設定變形的效果參數，參數主要有4類如下：

2. transform-origin：設定變形的基準點
3. perspective-origin：設定透視的基準點
4. perspective：設定透視的距離

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

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

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

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並不會改變元素實際的大小，所以排版上並不會跑掉