# 認識CSS#13 Transform ###### tags: `CSS` ## Transform transform 可以讓 html 元素(包含內容)被位移、旋轉、縮放和傾斜 ## Transform 屬性 | 屬性 | 說明 | | -------- | -------- | | transform-origin | 物件變行的起始點 | | translate | 物件進行X軸或Y軸的移動 | | skew | 物件進行X軸或Y軸以某個角度進行傾斜 | | rotate | 物件進行正時針方向或逆時針方向的旋轉動作 | | scale | 物件根據大小比例進行放大或縮小 | ## transform-origin ### 語法 ```=CSS 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 ### 語法 ```=CSS 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 ### 語法 ```=CSS 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 ### 語法 ```=CSS transform:rotate(20deg); /* 單位：deg，正值=順時針旋轉，負值=逆時針旋轉 */ ``` 這個屬性是將物件進行正時針方向或逆時針方向的旋轉動作，超過360度代表轉過一圈再繼續旋轉 ### [rotate 範例](https://codepen.io/binlandz123/pen/poaMzOp) ## scale ### 語法 ```=CSS 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)