使用CSS transform 改變元素的形狀和位置

CSS transform 是 CSS3 的特性之一，它提供了一種改變元素形狀和位置的方法，可以為網頁增加更多的動態效果和交互方式，更加靈活地呈現出設計師的創意。

一、translate 偏移變換

translate() 是 translateX() 和 translateY() 的組合，它們用來移動元素的位置。

transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);

translate() ，接收兩個參數，第一個參數是 x 軸偏移量，第二個參數是 y 軸偏移量，如上述代碼，將元素向 x 軸方向移動了 50 像素，向 y 軸方向移動了 100 像素；而 translateX() 和 translateY() 只是單獨作用於 x 軸或 y 軸移動。

二、scale 縮放變換

scale() 用來縮放元素的大小，可接收一個或兩個參數，分別表示橫向和縱向的縮放比例。

transform: scale(0.8);
transform: scaleX(0.8);
transform: scaleY(0.8);

scale() 可以同時縮放橫向和縱向，也可以只縮放橫向或縱向，如上述代碼，分別表示縮略 20%，只縮小了橫向或縱向的比例。

三、rotate 旋轉變換

rotate() 用來旋轉元素，值為角度數，正值表示向右旋轉，負值表示向左旋轉。

transform: rotate(45deg);

如上述代碼，表示將元素向右旋轉 45 度。同時如果需要逆時針旋轉則使用負值。

四、skew 傾斜變換

skew() 用來傾斜元素，可接收一個或兩個參數，分別為 x 軸和 y 軸。

transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(20deg);

如上述代碼所示，表示在 x 和 y 軸上分別傾斜 30 度和 20 度，也可以單獨作用於某一個軸，如 skewX() 只對 x 軸傾斜，skewY() 只對 y 軸傾斜。

五、matrix 矩陣變換

matrix() 用來實現多個變換效果，接收一個由 6 個值組成的數組作為參數，分別表示變換的係數，此係數是由一系列函數計算出來的。

transform: matrix(a, b, c, d, e, f);

其中 a、d 為水平和垂直縮放比例，b、c 為傾斜度數，e、f 為水平和垂直方向的偏移量。

總結

以上是常用的幾種 CSS transform 變換方法，它們的運用可以讓網頁更加生動、靈活，提升網頁體驗，尤其在移動端應用。通過使用 CSS transform，不僅可以讓網頁交互更加出彩，更可以減少頁面渲染的負擔，提高網頁的加載速度，讓用戶在瀏覽時更加流暢舒適。