在CSS3中，可以利用transform功能來實現文字或影象的旋轉、縮放、傾斜、移動這四種類型的變形處理。

注意：都是以中心點為原點進行移動旋轉縮放傾斜的。

skew的預設原點是transform-origin是這個物件的中心點。

transform-origin:設定元素原點位置；

transform-origin:50% 50% 0；預設值

X軸方向：left | center | right | length |%

Y軸方向：top | center | bottom | length |%

Z軸方向：length

transform-origin:50% 0;代表中心點位置在水平方向50%，垂直方向為0，等價於

一.rorate(旋轉)
transform: rorateX(45deg)：沿X軸方向旋轉45度

ransform: rorateY(45deg)：沿Y軸方向旋轉45度

ransform: rorateZ(45deg)：沿Z軸方向旋轉45度

ransform: rorate(45deg)：一個引數預設沿Z軸方向旋轉45度

單位deg為度的意思，正數為順時針旋轉，負數為逆時針旋轉

二.scale(縮放)

transform: scaleX(2)：水平方向變成原來的兩倍

transform: scaleX(0.5)：

transform: scaleX(-0.5)：水平方向變成原來的0.5倍，並且移動的物體反的

transform: scaleY(2)：垂直方向變成原來的兩倍

transform: scaleZ(2)：垂直螢幕方向（Z軸）變成原來的兩倍

transform: scale(2)：水平垂直方向都變為原來的2倍

transform: scale(0.5,3)：水平方向變成原來的0.5倍，垂直方向變為原來的3倍。

三.skew(傾斜)
transform: skewX(30deg)：沿X軸傾斜30度

transform: skewY(30deg, 30deg)：沿Y軸傾斜30度

transform: skew(30deg, 30deg)：沿X和Y軸傾斜30度

四.translate(移動）

transform: translateX(100px):沿水平方向平移100畫素；

transform: translateY(100px):沿垂直方向平移100畫素；

transform: translateZ(100px):沿Z軸方向平移100畫素；

transform: translate(45px, 150px)：水平方向上移動45畫素，垂直反向上移動150畫素的距離。

transform: translate2d(x,y,z)：x,y,z代表三個向量值，沿著這三個方向的合力進行移動。

引數也可以設為百分比。
---------------------