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，單位:無]
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