設定transform屬性可以使文字或圖像有旋轉(rotate)、縮放(scale)、傾斜(skew)、移動(translate)這四種類型的變形效果。

transform屬性可以設定哪些變形方式?

2D transform

translate移動 (單位: px/em/in/%)

• transform: translateX( );
• transform: translateX( );
• transform: translateY( );

例如:
設定向右50px向下100px移動

div {
 transform: translate(50px, 100px);
 }

rotate 設定順時鐘或逆時鐘方向旋轉多少度數

• rotate( ?deg)
  例如:
  設定順時鐘旋轉20度

div {
  transform: rotate(20deg);
}

用負值設定逆時鐘旋轉20度

div {
  transform: rotate(-20deg);
}

scale 設定縮放比例

對元素的大小比例進行放大或縮小
例如: 2代表2倍大，0.5代表一半大小

• transform: scaleX(數值);設定水平縮放
• transform: scaleY(數值);設定垂直縮放
• transform: scale(數值, 數值); 設定水平和垂直縮放
  例如:

div {
  transform: scale(2, 3);
}

div {
  transform: scale(0.5, 0.5);
}

skew設定傾斜角度

• transform: skewX( ?deg);設定水平方向傾斜角度
• transform: skewY( ?deg);設定垂直方向傾斜角度
• transform: skew( ? deg, ? deg);設定水平&垂直方向傾斜角度

例如:

div {
  transform: skew(20deg, 10deg);
}

matrix將以上的設定都寫在一起

順序如下:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY());

例如:

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

參考資料:
CSS 2D Transforms

3D transform

設定立體的旋轉變形方式，和2D比多了一個Z軸可以設定

• transform: rotateZ(? deg);

參考資料:
CSS 3D Transforms

transform-origin 設定變形的起始位置

變形的預設起點是 (center , center) 中心點
若要將變形起始位置更改，就必須設定transform-origin屬性，可以用正負數來更改，或是用top/center/bottom(top = 0%, bottom=100%)、left/center/right(left = 0%, right = 100%)等值來更改起始位置

例如:

transform-origin:100px 20px;
transform-origin:right;

參考資料:CSS沒有極限 - CSS transform 概觀, CSS屬性篇(二)：transform屬性,transform-origin
圖片來源: https://unsplash.com/s/photos/ferris-wheel

以上為個人學習筆記整理
若有錯誤，歡迎指正