transform 屬性允許你修改CSS視覺格式模型的座標空間
transform 屬性 , 只對 block 級元素生效！

旋轉（rotate）

transform:rotate(angle);
正值:順時針旋轉 rotate(360deg)
負值:逆時針旋轉 rotate(-360deg)
只能設單值。正數表示順時針旋轉，負數表示逆時針旋轉

平移（translate）

X方向平移:transform: translateX(tx)
Y方向平移:transform: translateY(ty)
二維平移：transform: translate(tx, ty)； 如果ty沒有指定，它的值預設為0。

可設單值，也可設雙值。
正數表示XY軸正向位移，負數為反向位移。設單值表示只X軸位移，Y軸座標不變，
例如transform: translate(100px);等價於transform: translate(100px,0);

縮放（scale）

transform:scale(2);
X方向縮放:transform: scaleX(sx);
Y方向縮放:transform: scaleY(sy);
二維縮放 :transform: scale(sx[, sy]); (如果sy 未指定，預設認為和sx的值相同)

要縮小請設0.01～0.99之間的值，要放大請設超過1的值。
例如縮小一倍可以transform: scale(.5);
放大一倍可以transform: scale(2);

如果只想X軸縮放，可以用scaleX(.5)相當於scale(.5, 1)。
同理只想Y軸縮放，可以用scaleY(.5)相當於scale(1, .5)

正值:縮放的程度
負值:不推薦使用（有旋轉效果）
單值時表示只X軸,Y軸上縮放粒度一樣，如transform:scale(2);等價於transform:scale(2,2);

傾斜（skew）

transform:skewX(45deg);
X方向傾斜:transform: skewX(angle)
skewX(45deg):引數值以deg為單位 代表與y軸之間的角度
Y方向傾斜:transform: skewY(angle)
skewY(45deg):引數值以deg為單位 代表與x軸之間的角度
二維傾斜:transform: skew(ax, ay); 如果ay未提供，在Y軸上沒有傾斜
skew(45deg,15deg):引數值以deg為單位 第一個引數代表與y軸之間的角度
第二個引數代表與x軸之間的角度
單值時表示只X軸扭曲，Y軸不變，如transform: skew(30deg);等價於transform: skew(30deg, 0);
考慮到可讀性，不推薦用單值，應該用transform: skewX(30deg);。skewY表示只Y軸扭曲，X軸不變

正值:拉正斜槓方向的兩個角
負值:拉反斜槓方向的兩個角

transform-origin基點的變換

在沒有設定過transform-origin屬性時，CSS變形進行的旋轉、移位、縮放等操作都是以元素自己中心（變形原點/中心點）位置進行變形的。

而CSS3 中的transform-origin屬性用於設定旋轉元素的基點位置

transform-origin: [ | left |center |right ] ,[ | top |center |bottom ]

transform-origin: top left;

transform-origin: 20px 40px;