Transform字面上就是變形，改變的意思。

在CSS3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。下面我們一起來看看CSS3中transform的旋轉rotate、扭曲skew、縮放scale和移動translate具體如何實現，老樣子，我們就從transform的語法開始吧。

表示不進麼變換；表示一個或多個變換函數，以空格分開；換句話說就是我們同時對一個元素進行transform的多種屬性操作，例如rotate、scale、translate三種，但這裡需要提醒大家的，以往我們疊加效果都是用逗號（「，」）隔開，但transform中使用多個屬性時卻需要有空格隔開。大家記住了是空格隔開。

transform屬性實現了一些可用SVG實現的同樣的功能。它可用於內聯(inline)元素和塊級(block)元素。它允許我們旋轉、縮放和移動元素 ，他有幾個屬性值參數：rotate;translate;scale;skew;matrix

01-transform-origin 起始點/基點

transform-origin 屬性允許您改變被轉換元素的位置。2D 轉換元素能夠改變元素 x 和 y 軸。3D 轉換元素還能改變其 Z 軸。

x-axis 值：eft、center、right、length、%
y-axis 值：eft、center、right、length、%
z-axis 值：length

transform 的起始點，一般來說變形的起始點都在物件的中心點，但如果需要像時鐘的分秒針一樣，中心點並不再物件的中心，就需要靠transform-origin去設定物件變形的起始點。

See the Pen css-transform-rotate(xxdeg) by Jimmy_Wu (@Jimmy_Wu) on CodePen.

在html裡的基準點都是從左上開始，從水平開始往右稱為x軸，垂直往下稱為y軸，CSS在編寫習慣上也是先寫x軸再寫y軸，如50px 100px，結果會是x軸向右50px，y軸垂直向下100px。而tranaform的屬性中，坐標將是相當重要的關鍵。

CSS沒有極限 - CSS transform-origin 起始點-2

transform的起始點，一般來說變形的起始點都在物件的中心點，但如果需要像時鐘的分秒針一樣，中心點並不再物件的中心，就需要靠transform-origin去設定物件變形的起始點。

02-旋轉Rotate

通過指定的角度參數對原元素指定一個2D rotation（2D 旋轉），需先有transform-origin屬性的定義。transform-origin定義的是旋轉的基點，其中angle是指旋轉角度，如果設置的值為正數表示順時針旋轉，如果設置的值為負數，則表示逆時針旋轉。
如：transform:rotate(30deg):

See the Pen css-transform-rotate(xxdeg)-改定位點 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

設定rotate旋轉50度，並沒有設定起始點。因為此時的物件預設值坐標是50% 50%，D變形物件會依起始點開始作變形，如範例中就是從x-0 y-0，左上角開始跑，所以在設定transform必須要清楚瞭解到要變型物件的起始點。

03-縮放Scale

Scale是屬於transform2D的縮放變形效果，值為x軸及y軸倍率，而他一樣會受物件起始點的影響。
例如：transform:scale(2,1.5)

See the Pen css-transform-scale+origin by Jimmy_Wu (@Jimmy_Wu) on CodePen.

04-移動translate

移動 translate 分為三種情況：

  1. translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
  2. translateX(x)僅水平方向移動（X軸移動）
  3. translateY(Y)僅垂直方向移動（Y軸移動）

See the Pen css-transform-translate by Jimmy_Wu (@Jimmy_Wu) on CodePen.

05-扭曲skew

扭曲skew和translate、scale一樣同樣具有三種情況

  1. kew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）
  2. skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）
  3. skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）

See the Pen css-transform-扭曲skew by Jimmy_Wu (@Jimmy_Wu) on CodePen.

06-Rotate 3D

3D也不例外，如果設定好基準點，物件才能依設定的軸心旋轉，如果把軸心放在最左邊及最右邊，就可以向上方這開門的效果。

See the Pen css-transform-scale+origin+Rotate 3D by Jimmy_Wu (@Jimmy_Wu) on CodePen.

資料來源：
CSS沒有極限 – CSS transform-origin 起始點
Airen的博客-CSS3 Transform