前言

做動畫的第一步，當然就是讓元素移動囉！
在 CSS3 內我們可以使用很多方式來讓元素從 定位點A 移動至 定位點B，那麼本篇張我們來了解如何將敏捷值點到最高的 Transform 吧～

簡介

Transform 屬性可以將元素渲染到 視覺格式化空間(visual formatting model) 座標系統上，包括平移、旋轉、縮放、傾斜。

若 Transform 屬性的值為 none 他仍然會引響整個畫面佈局的 疊層上下文(stacking context) 以及 內容包含塊(containing block)

視覺格式化空間(visual formatting model)：
視覺格式化空間決定了描述了使用者如何存取文檔樹(document tree) 以及 處理並且顯示在視覺媒體上(visual media)。

Tansform 基礎語法

tranfrom: Function values(X, Y)

Translate()

透過向量定位 [tx, ty] 來指定 2D Translation 的位置，tx 為 X軸數值 ty 為 Ｙ軸 數值。

• translateX(): 純粹指定元素在 Ｘ軸 平移的數量。
• translateY(): 純粹指定元素在 Y軸 平移的數量。

特別要注意的是，在 translate 上使用百分比當單位時，該百分比是元素本身寬高的百分比值。

scale()

透過向量定位 [sx, sy] 來指定 2D Translation 縮放的大小，sx 為 沿著X軸縮放的數值 sy 為沿著 Y軸 縮放的數值，若沒有提供第二個數字，第二個數字的值就會等同於第一個值。
舉例來說，scale(1,1) 會使元素大小不改變，scale(2,2) 會使元素大小放大一倍。

• scaleX(): 純粹指定元素沿著 X軸 縮放的數值。
• sclateY(): 純粹指定元入沿著 Y軸 縮放的數值。

rotate()

透過向量定位指定沿著元素原始定位點來指定 2D Translation 旋轉的角度。

skew()

透過向量定位 [ax, ay] 來指定 2D Translation 傾斜的角度，ax 為 沿著X軸傾斜角度的數值 ay 為沿著 Y軸 傾斜角度的數值，若沒有提供第二個數字，第二個數字的值則為零。

• skewX(): 純粹指定元素沿著X軸傾斜的角度。
• skewY(): 純粹指定元素沿著Y軸傾斜的角度。

注意！
skew()會出現瀏覽器相容問題，要注意語法版本問題。
若因瀏覽器不兼容問題，請改用skewX() 與 skewY()

感謝你的注意！

Transform Origin

當我們透過 Transfrom 屬性來對元素做位置變化時，也可以搭配 transfrom-origin 來設定元素的基準點。
在沒有指定基準點位置時，transfrom-origin 屬性預設數值為 由左到右、由上到下的 [50%,50%]。

若是我們針對 transfrom-origin 僅指定一個數值，則第二個值為 [center]、第三個值為 [0]，而我們若是指定了第一與第二個數值，則第三個數值為 [0]。

Transfrom Origin 基礎語法

• length: 給予固定數值的偏移量，水平以及垂直偏移量的基準點為元素左上角。
• top: 由上而下計算出元素位於 Y軸 [0%] 的位置。
• bottom: 由上而下計算出元素位於 Y軸 [100%] 的位置。
• left: 由左而右計算出元素位於 X軸 [0%] 的位置。
• right: 由左而右計算出元素位於 X軸 [100%] 的位置。

必殺：認真系列 - 360 旋轉

認識完 Transfrom 的基礎語法之後，我們趕緊來練習新學會的必殺技：認真・360° 旋轉。

基礎架構

首先我們找到一張時鐘的圖片，將其拆分為 時鐘本體(outer) 以及 指針(inner)。

<div class="outer">
	<div class="inner"></div>
</div>

元素定位

接著我們將準備好的素材放進去畫面渲染，並且將元素都定位好。

.outer {
  width: 500px;
  height: 500px;
  background-image: url(https://i.imgur.com/S8NmbbI.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.inner {
  width: 200px;
  height: 200px;
  background-image: url(https://i.imgur.com/Hf1e7cp.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 180px;
  left: 150px;
  transform-origin: 110px 125px;
}

設定旋轉基準點

由於我們是要靠著指針中心去讓指針旋轉，所以我們在指針的部分加上 transform-origin， 指定指針的旋轉基準點。並試著讓指針旋轉看看

.inner {
  width: 200px;
  height: 200px;
  background-image: url(https://i.imgur.com/Hf1e7cp.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 180px;
  left: 150px;
  transform-origin: 110px 125px;
  transfrom: rotate(90deg);
}

加上動畫效果

上面的部分其實就已經完成今天 Transfrom 的技巧運用囉，不過為了讓整個時鐘旋轉看起來更自然一點，我們借助 CSS3 Animation 屬性來讓指針不斷的旋轉。有關於 Animation 的部分我在後面會有更詳細的介紹。還請大家耐心等待～

.inner {
  width: 200px;
  height: 200px;
  background-image: url(https://i.imgur.com/Hf1e7cp.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 180px;
  left: 150px;
  transform-origin: 110px 125px;
  animation: clock 5s step-start both infinite;
}

@keyframes clock {
  0%{
    transform: rotate(0deg);
  }
  12.5% {
    transform: rotate(45deg);
  }
  25% {
    transform: rotate(90deg);
}
  37.5% {
    transform: rotate(135deg);
}
  50% {
    transform: rotate(180deg);
}
  62.5% {
    transform: rotate(225deg);
}
  75% {
    transform: rotate(270deg);
  }
  87.5% {
    transform: rotate(315deg);
}
  100% {
    transform: rotate(360deg);
  }
}

完成

呼～ 今天的練習有沒有很辛苦呢？ 相信大家經過鍛鍊之後，變強也變禿了對吧？
那麼今天的 Transfrom 2D 就先介紹到這邊，我們明天會再更進階的介紹 Transfrom 3D 的語法以及帶著大家實做一些小動畫，那麼，明天見！

參考資料

• W3.org - transfrom
• MDN - transform