iT邦幫忙

2022 iThome 鐵人賽

DAY 14
0
Modern Web

重造會 Slide 的輪子!深入 JavaScript、CSS 模組化設計系列 第 14

Day 14 - CSS Transform 屬性指南 (1) 說明

  • 分享至 

  • xImage
  •  

前面文章提到了市面上的 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 屬性需要大量的範例才好理解,因此分為三篇文章介紹:

  • 說明:Day 14 文章
  • transform 2D 效果:Day 15 文章
  • transform 3D 效果:Day 16 文章

套用 transform 屬性在我們的 Slider 會在 Day 17 (預計)。敬請期待喔。


今天的文章並沒有程式碼範例,不過之前的範例可在 GitHub Page 閱讀
原始碼可在 2022 鐵人賽專用 GitHub Repo 下載


上一篇
Day 13 - CSS Flex 屬性指南 (4) 排序 (Order)
下一篇
Day 15 - CSS Transform 屬性指南 (2) 二維函式 (2D)
系列文
重造會 Slide 的輪子!深入 JavaScript、CSS 模組化設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言