Transform是CSS中，用來改變視覺格式化模型（visual formatting model）的各種型態，且它具有三維的概念，可以聲明元素的三維視覺效果。它有多種function（功能），像是rotate（旋轉）、scale（改變比例）、translate（平移）、perspective（三維視角的景深）等功能。

我們這篇只會介紹transform中的translate，它又可以在元素的對齊上，與margin、position相互應用。

translate功能介紹

語法：
transform: translate(單位或百分比, 單位或百分比);
transform: translateX(單位或百分比);
transform: translateY(單位或百分比);

第一種語法可以同時聲明Ｘ軸、Ｙ軸的平移數值 ; 第二、三種語法可以單純聲明Ｘ軸或Ｙ軸的平移數值。

• 單位平移
  以單位平移的方式很單純，單位值為多少就平移多少，然後transform支援負值（負值會往normal flow反方向平移）：

  .translate {
    background-color: pink;
    transform: translate(100px, -50px);
  }
  

  

• ％百分比平移
  translate的百分比基準跟position或是margin以block container為基準不一樣 ; translate的百分比基準是自己的width跟height：

  .translate {
    background-color: pink;
    transform: translate(100%, -50%);
  }
  

  

• 與margin或position相互應用
  我們在Day19 CSS基本樣式-Background(下)有提到background-position，在背景圖片大於元素框時，可以設定center值，在背景圖片想要對齊正中間時很方便。

  可是margin跟position都是以block container為基準，它們的50%是block container的50%而不是元素本身的50%，很難做到background-position。
  如果我們今天在一個block container內放一個比它大很多的圖片，而我們希望圖片的中心點對block container的中心點：

  .outer {
    width: 500px;
    height: 200px;
    border: 5px solid;
    overflow: hidden;
  }
  
  img {
    width: 900px;
    background-color: pink;
  
  }
  

  

  先用margin或是position推50%，先把圖片對好block container的中心點：

  img {
    margin-top: 50%;
    margin-left: 50%;
  }
  

  .outer  {
    position: relative;
  }
  
  img {
    position: absolute;
    top:50%;
    left: 50%;
  }
  

  

  再用translate來讓圖片的中心點對齊：

  img {
    transform: translate(-50%, -50%);
  }
  

  可愛豬的臉部特寫就會出現在大家面前：
  

  Try it on codepen.

*目前translate也有單獨聲明的語法：

translate: X軸, Y軸;

可是各家瀏覽器的支援率很低，可以到 Can I use 輸入HTML的element或是CSS的property，查看各家瀏覽器的支援情形：

translate屬性的支援度不太樂觀。

transform是幾乎每家瀏覽器都支援，除了少數版本較舊的不支援外。

所以在語法上還是以transform: (function)來聲明，支援度比較好。如一開始所說transform屬性還有很多function，可以到MDN或CSS規範認識更多。

最後一篇就到這了，雖然此系列的內容很有限。因為幾個月前剛自學的自己，也是依靠許多前人的分享，才能走到現在。希望這篇對於從零開始學習的人能有一些幫助，至少可以知道一些基本觀念，也知道有哪些學習資源，這樣自學時，就能更看得懂那些專有名詞。

那就繼續加油啦，要不停的學習才能進步啊！

Run Forrest, run!!!!!