原文連結

這個很簡單，就跟border-radius一樣，就是一個引數，同樣是針對不同的瀏覽器有不同的私有屬性。

w3c上的例子是這樣子寫的：·

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
}

好吧，我發現我錯了，這玩意還不是一般的容易，還有N多的函式可以使用的啊。具體如下:

Formal grammar: <transform-function> [<transform-function>]* | none

//code from http://caibaojian.com/transform.html
transform: none
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
transform: translate(12px, 50%)
transform: translateX(2em)
transform: translateY(3in)
transform: scale(2, 0.5)
transform: scaleX(2)
transform: scaleY(0.5)
transform: rotate(0.5turn)
transform: skewX(30deg)
transform: skewY(1.07rad)
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
transform: translate3d(12px, 50%, 3em)
transform: translateZ(2px)
transform: scale3d(2.5, 1.2, 0.3)
transform: scaleZ(0.3)
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
transform: perspective(17px)

 
transform: translateX(10px) rotate(10deg) translateY(5px)

下面我簡單的介紹幾種比較常用的方法

一、旋轉rotate

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

二、移動translate

移動translate我們分為三種情況：translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；translateX(x)僅水平方向移動（X軸移動）；translateY(Y)僅垂直方向移動（Y軸移動），具體使用方法如下：

transform:translate(100px,20px):

transform:translateX(100px):

transform:translateY(20px):

三、縮放scale

縮放scale和移動translate是極其相似，他也具有三種情況：scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮 放）；scaleX(x)元素僅水平方向縮放（X軸縮放）；scaleY(y)元素僅垂直方向縮放（Y軸縮放），但它們具有相同的縮放中心點和基數，其中 心點就是元素的中心位置，縮放基數為1，如果其值大於1元素就放大，反之其值小於1，元素縮小。下面我們具體來看看這三種情況具體使用方法：

transform:scale(2,1.5):

transform:scaleX(2):

transform:scaleY(2):

四、扭曲skew

扭曲skew和translate、scale一樣同樣具有三種情況：skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值 進行扭曲變形）；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形），具體使用 如下：

transform:skew(30deg,10deg):

transform:skewX(30deg)

transform:skewY（10deg）

五、矩陣matrix

matrix(<number>, <number>, <number>, <number>, <number>, <number>)
其他的內容可以看這裡的文章介紹，很詳細：http://www.w3cplus.com/content/css3-transform