# css 整理 - Transform 形變
###### tags: `css`
## 2D Transform
二維（平面）形變，可變數值有 x, y 三個軸向
### 2D 屬性

| 屬性 |說明| 數值 |
| -------- | -------- | -------- |
| transform |函數本身|translate(x,y) / scale(x,y)/ rotate(deg) / skew(x,y) / matrix() |
| transform-origin|元素原始位置|**(50%,50%)** / (30px,20px) (left,bottom)… |

ex:

.myShape {
    transform: translateX(2px); 
    transform-origin: center right;
}

### 2D 函數

圖片來源：[www.scaler.com](https://www.scaler.com/topics/css/2d-transformation-in-css/)

(以下全以參考點為中心)

|函數|說明|可輸入數值|其他單軸函數|
| -------- | -------- | -------- | -------- |
| translate(x,y) |**位移** | 尺寸值 或 ％ ex:**none**/20px/40%| translateX(x) translateY(y)
| scale(x,y) | **縮放** (X軸縮放x倍，Y軸縮放y倍)|倍率 ex:0.4/1.2/200...|scaleX(x) scaleY(y)|
rotate(deg) | **旋轉** |deg ex:30deg/-150deg|
skew(x,y)|**傾斜** (單個參數：如只寫一個，就只有X軸的傾斜)|deg ex:30deg/-150deg |skewX() skewY()
matrix()|變形矩陣的6個參數值產生2D變形|matrix(scaleX(),skewY(),skewX(), scaleY(),translateX(),translateY())

## 3D Transform
三維（立體）形變，可變數值有 x, y, z 三個軸向

### 3D 屬性

| 屬性 |說明| 可輸入數值 |
| -------- | -------- | -------- |
| transform |函數本身|translate3d(x,y,z) / scale3d()/ matrix3d(…) / rotate3d(x,y,z,deg) |
| transform-origin|元素原始位置| (x,y,z) |
transform-style|定義是3D或是2D |**flat**(2D) / preserve-3d
perspective|透視距離|**0**
perspective-origin|透視原點|**(50%,50%)** / (30px,20px) (left,bottom)...
backface-visibility|元素背面是否可見| hidden/visible

ex:

.myShape { 
    transform: translateZ(25px);
    transform-origin:50% 50% 50%; 
    transform-style:preserve-3d;
    perspective: 200px;
    perspective-origin: center;
    backface-visibility: hidden;
}

### 3D 函數

|函數|說明|數值|其他單軸函數|
| -------- | -------- | -------- | -------- |
| translate3d(x,y,z)| **位移**| 尺寸值 或 ％|translateX(m) translateY(m) translateZ(m)|
|scale3d()|**縮放**| 倍率 ex:0.4/1.2/200… |scaleX(x) scaleY(y) scaleZ(z)
|rotate3d(x,y,z,deg)|**旋轉** 從參考點為中心軸旋轉θ度 (旋轉度數：正值=順時針旋轉，負值=逆時針旋轉)|deg ex:30deg/-150deg|rotateX(θ) rotateY(θ) rotateZ(θ)
matrix3d(...)|詳見 [matrix3d介绍](https://www.jianshu.com/p/52e0018e6ce2)|元素以參考點為中心，依變形矩陣的16個參數值產生3D變形|

## Transform-origin 元素的原始位置(參考點)
所有形變的參考起始點

transform-origin: 尺寸值 | 50% | center,top,right,bottom,left

- x、y 可為尺寸值 或 % (百分比) 或方位關鍵字；% 是以元素本身大小作為計算基準。
- 預設值為元素中心點(50%,50%)
- 元素左上角座標為(0,0)
- 方位關鍵字(center,top,right,bottom,left)，如忽略第二個值，則自動定為center

ex:

transform-origin:50% 50%; /* 預設值 中心點 */
transform-origin:50px 20px;   /* 尺寸值 */

transform-origin:top left;  /* 方位關鍵字 */

## 其他情形
### 同一元素套用多個變形函數
=> 也可被轉換為 matrix() （詳見 [matrix3d介绍](https://www.jianshu.com/p/52e0018e6ce2)）

.box{
transform:translate(120px) rotate(80deg) scale(0.5);
}

## 參考資料
[CSS動畫-2D Transform ](https://ithelp.ithome.com.tw/articles/10200713)