前面文章提到了市面上的 Slider 套件大多使用 CSS 的變形 (transform) 屬性，今天就來聊聊如何使用這個屬性，以達到我們期待中的效果。
transform 屬性可以用的屬性值非常的多唷。有 12 個可以設定單一效果屬性的函式有 12 個，可以一次設定多個效果的函式有 9 個。它又分為 2D 及 3D 兩種類別。
只使用一個參數，且效果影響的方向或變型的種類只有一種。
| 函式 | 類型 | 功用 | 參數 | 說明 |
|---|---|---|---|---|
| translateX | 2D | 平移 | translateX(x) |
進行 X 軸方向的移動 |
| translateY | 2D | 平移 | translateY(y) |
進行 Y 軸方向的移動 |
| translateZ | 3D | 平移 | translateZ(z) |
進行 Z 軸方向的移動 |
| scaleX | 2D | 縮放 | scaleX(x) |
進行 X 軸方向的比例放大或縮小 |
| scaleY | 2D | 縮放 | scaleY(y) |
進行 Y 軸方向的比例放大或縮小 |
| scaleZ | 3D | 縮放 | scaleZ(z) |
進行 Z 軸方向的比例放大或縮小 |
| skewX | 2D | 傾斜 | skewX(a) |
從 X 軸方向以設定的角度傾斜 |
| skewY | 2D | 傾斜 | skewY(a) |
從 Y 軸方向以設定的角度傾斜 |
| rotate | 2D | 旋轉 | rotate(a) |
進行順時針或逆時針的旋轉 |
| rotateX | 3D | 旋轉 | rotateX(a) |
進行 X 軸方向的旋轉 |
| rotateY | 3D | 旋轉 | rotateY(a) |
進行 Y 軸方向的旋轉 |
| rotateZ | 3D | 旋轉 | rotateZ(a) |
進行 Z 軸方向的旋轉 |
使用多個參數，為多個單一效果屬性值的集合。
| 函式 | 類型 | 功用 | 參數 | 說明 |
|---|---|---|---|---|
| matrix | 2D | 矩陣 | matrix(...) |
設定 6 個值進行 2D 矩陣變化 |
| matrix3d | 3D | 矩陣 | matrix3d(...) |
設定 12 個值進行 3D 矩陣變化 |
| translate | 2D | 平移 | translate(x, y) |
等同 translateX, translateY |
| translate3d | 3D | 平移 | translate3d(x, y, z) |
等同 translateX, translateY, translateZ |
| scale | 2D | 縮放 | scale(x, y) |
等同 scaleX, scaleY |
| scale3d | 3D | 縮放 | scale3d(x, y, z) |
等同 scaleX, scaleY, scaleZ |
| rotate3d | 3D | 旋轉 | rotate3d(x, y, z, a) |
對 x, y, z 軸進行 a 角度的旋轉 |
| skew | 2D | 傾斜 | skew(a, a) |
等同 skewX, skewY |
參數說明
x: 代表 X 軸的值。y: 代表 Y 軸的值。z: 代表 Z 軸的值。a: 代表角度 (angle) 的值。由於 transform 屬性需要大量的範例才好理解，因此分為三篇文章介紹:
套用 transform 屬性在我們的 Slider 會在 Day 17 (預計)。敬請期待喔。
今天的文章並沒有程式碼範例，不過之前的範例可在 GitHub Page 閱讀
原始碼可在 2022 鐵人賽專用 GitHub Repo 下載
iThome鐵人賽
看影片追技術