# 認識CSS#13 Transform
###### tags: `CSS`

## Transform

transform 可以讓 html 元素(包含內容)被位移、旋轉、縮放和傾斜

## Transform 屬性

| 屬性 | 說明 |
| -------- | -------- |
| transform-origin | 物件變行的起始點 |
| translate | 物件進行X軸或Y軸的移動 |
| skew | 物件進行X軸或Y軸以某個角度進行傾斜 |
| rotate | 物件進行正時針方向或逆時針方向的旋轉動作 |
| scale | 物件根據大小比例進行放大或縮小 |

## transform-origin

### 語法

transform-origin: 100px 20px; 
/* x、y可為尺寸值 或 % (百分比) 或方位關鍵字；% 是以元素本身大小作為計算基準。*/

transform-origin: left top;
/* 可使用方位 center,top,right,bottom,left ，如果沒寫預設為 center */

這個屬性可以改變物件變形的基準點，也就是說可以決定物件要從哪裡變形
預設的變形基準點是<font color='red'>物件的中心點 50%,50% </font>

<font color='red'>注意變形起始點是在元素中定義，而不是:hover裡:</font>

### [範例 left bottom 當起點旋轉80度](https://codepen.io/binlandz123/pen/ZErdgqB)

## translate

### 語法

transform: translate(25px, 25px);
/* ( X軸, Y軸)，除了固定長度單位也可以用 % ， 如果用 % 是以物件大小為計算基準 ，如果第二個參數不寫預設為 0*/

transform: translateX(25px);
/* X軸平移，可以用固定長度單位也可以用 % */

transform: translateY(25px);
/* Y軸平移，可以用固定長度單位也可以用 % */

這個屬性可以讓物件 X 軸, Y 軸平移，值可以使用 CSS 中的正負長度數值(px, em, in)，或是 %

### [translate 範例](https://codepen.io/binlandz123/pen/dydBxaj)

## skew

### 語法

 transform:skew(20deg, 10deg); 
 /* ( X軸, Y軸)，單位使用 deg*/
 
 transform:skewX(10deg); 
 /* X軸傾斜，單位使用 deg*/
 
 transform:skewY(10deg); 
  /* Y軸傾斜，單位使用 deg*/

這個屬性可以讓物件進行 X 軸或 Y 軸以某個角度進行傾斜，角度也是使用正負數後面加上deg來代表

### [skew 範例](https://codepen.io/binlandz123/pen/jOZgNYw)

## rotate

### 語法

transform:rotate(20deg); 
/* 單位：deg，正值=順時針旋轉，負值=逆時針旋轉 */

這個屬性是將物件進行正時針方向或逆時針方向的旋轉動作，超過360度代表轉過一圈再繼續旋轉

### [rotate 範例](https://codepen.io/binlandz123/pen/poaMzOp)

## scale

### 語法

 transform:scale(0.5);
 /* 根據提供的數字值進行放大或縮小，沒有單位，2代表2倍大，0.5代表一半大小 */
 
 transform:scaleX(0.5);
 /* X 軸縮放 */
 
 transform:scaleY(0.5); 
 /* Y 軸縮放 */

這個屬性是對大小比例進行放大或縮小，數值為正數

### [scale 範例](https://codepen.io/binlandz123/pen/NWyQKog)