2D Transform

transform可以讓html元素(包含內容)被位移、旋轉、縮放和傾斜。
分為2D和3D，今天先來介紹2D吧～

瀏覽器支援情形

圖片來源:https://www.w3schools.com/css/css3_2dtransforms.asp

Transform-origin元素的原始位置(參考點)

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

transform-origin:50px 20px;   /* 尺寸值 */
/* 或者是 */
transform-origin:left;  /* 方位關鍵字 */

[補充]:元素預設座標系統預設位置為左上角(0,0)，主要用來排版;transform的預設值為(50%,50%)，主要用來做動畫效果，大家不要搞混喔～

Transform屬性

transform 屬性可能被指定為關鍵字值none或一或多個transform-function值，預設值為none。

transform:none; /* none */
/* 或者是 */
transform:translateX(2px);  /* transform-function */

以下為transform-function介紹：

• 長度[參數:m，單位:尺寸值 或％，如使用%，是以元素本身大小作為計算基準]
• 角度[參數:θ，單位:deg]
• 倍率[參數:s，單位:無]
• 數值[參數:n，單位:無]

Transform屬性說明

(以下紅色點為參考點)

• translate():
  • 說明：位移，元素以參考點為中心進行2D位移
  • 單位：尺寸值或百分比
  • 單個參數：如果只寫一個參數，省略的第2個參數會視為0，也就是只有X軸的移動距離
  • 可細分為X軸與Y軸的位移，屬性如下：translateX() 、 translateY()

.box{
transform:translate(20px,30px);
/*其他CSS屬性省略*/
}

• scale():
  • 說明：縮放，元素以參考點為中心進行2D縮放
  • 單位：無，為純數值倍率
  • 單個參數：如果只寫一個參數，就是X、Y軸以同樣倍率縮放
  • 可細分為X軸與Y軸的縮放，屬性如下：scaleX()、scaleY()

.box{
transform:scale(1,2);
transform-origin:top left;
/*其他CSS屬性省略*/
}

• rotate():
  • 說明：旋轉，元素以參考點為中心進行旋轉
  • 單位：deg，正值=順時針旋轉，負值=逆時針旋轉

.box{
transform:rotate(30deg);
transform-origin:top left;
/*其他CSS屬性省略*/
}

• skew():
  • 說明：傾斜，元素以參考點為中心進行傾斜
  • 單位：deg
  • 單個參數：如只寫一個，就只有X軸的傾斜
  • 可細分為X軸與Y軸的傾斜，屬性如下：skewX()、skewY()

.box{
transform:skew(30deg,10deg);
transform-origin:top left;
/*其他CSS屬性省略*/
}

• matrix():元素以參考點為中心，依變形矩陣的6個參數值產生2D變形，matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

同一元素套用多個變形函數

• 函數間以半形空格間隔即可

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

～不專業學習筆記，如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1] https://www.w3schools.com/css/css3_2dtransforms.asp
[2] https://eyesofkids.gitbooks.io/css3/content/contents/transform2d.html
[3] http://boohover.pixnet.net/blog/post/35341387-%E6%97%8B%E8%BD%89%E3%80%81%E5%82%BE%E6%96%9C%E3%80%81%E7%B8%AE%E6%94%BE%E7%9A%84%E8%AE%8A%E5%BD%A2%E6%95%88%E6%9E%9C-transform-%28css-prope