CSS-transform 2D

發表於 | 分類於 | 0 comments

利用 transform 將元素加入 位移、旋轉、縮放和傾斜 的效果。

基本語法

transform 屬性可以設定 一個 或 多個 的參數，
若設定多個參數的話，中間的區隔使用 空白 即可。

1
2
3
transform: 第一個參數 第二個參數 ...

transform: translate(100px) rotate(20deg);

常用的參數如下列

  • 位移 - translate()、translateX()、translateY()
  • 旋轉 - rotate()
  • 縮放 - scale()、scaleX()、scaleY()
  • 傾斜 - skew()、skewX()、skewY()

位移translate

語法

  • 若設定二個，用 逗號 區隔

    • translate(tx) → 若僅設定一個參數，代表只 位移X
    • translate(tx, ty)

  • 設定 X軸 位移

    • translateX()

  • 設定 Y軸 位移

    • translateY()

範例

位移 X軸 50px,位移 Y軸 50px

1
2
3
4
5
.moved {
  transform: translate( 50px, 50px);
  // 上下二段語法，結果一樣
  transform: translateX( 50px) translateY( 50px);
}

See the Pen transform-translate by Kanboo (@Kanboo) on CodePen.

旋轉rotate

語法

rotate( 旋轉角度 ) => rotate( 20deg )

旋轉30度角 = 30deg
旋轉90度角 = 90deg

範例

旋轉45度角

1
2
3
.rotate {
  transform: rotate( 45deg);
}

See the Pen transform-rotate by Kanboo (@Kanboo) on CodePen.

縮放scale

語法

參數預設大小為 1 ，若設定 小於 1 就是 縮小，大於 1 就是 放大。

  • 若設定二個，用 逗號 區隔

    • scale(sx) → 若僅設定一個參數，代表同時縮放 X 和 Y
    • scale(sx, sy)

  • 縮放 X軸

    • scaleX()

  • 縮放 Y軸

    • scaleY()

範例

縮小至0.7倍

1
2
3
4
5
.scaled {
  transform: scale(0.7); 
  // 上下二段語法，結果一樣
  transform: scaleX(0.7) scaleY(0.7);
}

See the Pen transform-scale by Kanboo (@Kanboo) on CodePen.

傾斜skew

語法

  • 若設定二個，用 逗號 區隔

    • skew(ax) → 若僅設定一個參數，代表只 傾斜X
    • skew(ax, ay)

  • 傾斜 X軸

    • skewX()

  • 傾斜 Y軸

    • skewY()

範例

skewed1 傾斜 X , skewed1 傾斜 X 和 Y

1
2
3
4
5
6
7
8
9
10
11
 .skewed1 {
  transform: skew(10deg);
  // 等同 skewX(10deg)
  transform: skewX(10deg);
}

.skewed2 {
  transform: skew(10deg, 10deg);
  // 等同 skewX(10deg) skewY(10deg)
  transform: skewX(10deg) skewY(10deg);
}

See the Pen transform-skew by Kanboo (@Kanboo) on CodePen.