在css3的標准中新增加了變形樣式，這些樣式使得網頁中各元素的位置形狀的變換變得更加容易。其語法如下：
transform：none | <transform-function>+
其中對於<transform-function>這一屬性值，css中規定了4類常用變換
1.translate()
該值指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值為0 。
例：
.exp{
width:150px;
height:150px;
background:red;
}
.exp:hover{
transform:translate(100px,100px);
}
當鼠標移動到元素上時，元素的位置發生了改變（向左平移了100px，向下平移了100px）。
當然也可以指制定某一個方向上的平移，如translateX（），translateY（），這時，括號里的值只有一個，表示平移的長度。
2.rotate（）
該值指定了對象的2d旋轉，括號里面為旋轉度數，單位為deg。特別注意，在使用該屬性值時要先設置元素的中心點，即transform-origin，這個樣式的值可以為表示長度的單位，也可以是百分比。
例：
.exp{
width:150px;
height:150px;
background:red;
}
.exp:hover{
transform-origin:0 50%;
transform:rotate(45deg);
}
在2d旋轉中默認旋轉方向為順時針方向，旋轉中心為transform-origin所設置的位置。同時，我們也可以定義其旋轉方式為沿着旋轉軸方向旋轉，例如rotateX（），rotateY（）。
3.Scale（）
該屬性表示的是元素的縮放，在2d變形中括號里的值有兩個，分別表示x軸和y軸方向的縮放，其值為一數字，表示的是與原來尺寸的比例系數。
例：
.exp{
width:150px;
height:150px;
background:red;
}
.exp:active{
transform-origin:0 50%;
transform:scale(2,1.5);
}
與上面的屬性值類似，我們可以設置單一方向上的縮放，scaleX（），scaleY()。
4.Skew（）
該屬性值表示的是元素的傾斜，該值得兩個參數分別表示X軸與Y軸上的傾斜，其值都以角度（deg）表示。
例：
.exp{
width:150px;
height:150px;
background:red;
transform:skew(25deg,0);
}
在傾斜中，最后所得的元素的位置與transform-origin有關。
上述的四個屬性不僅適用於2d場景，同時也適用於3d場景中，此時只需要將其改寫為translate3d（），rotate3d()，skew3d()，scale3d()。此時，坐標系中有XYZ三個坐標軸，其中X軸為水平方向，正方向為右，Y軸為垂直方向，正方向向下，Z軸為垂直屏幕的方向，垂直屏幕向外（即指向屏幕前的自己）為正方向。
了解了css中的變形之后，我們可以由此設計過渡動畫。這里的過渡動畫是指通過css使得元素的某些屬性發生改變時，所產生的動畫效果。在CSS中創建簡單的過渡效果可以從以下幾個步驟來實現：
第一，在默認樣式中聲明元素的初始狀態樣式；
第二，聲明過渡元素最終狀態樣式，比如懸浮狀態；
第三，在默認樣式中通過添加過渡函數，添加一些不同的樣式。
- transition-property(過渡屬性)：
表示在動畫中所要產生動畫效果的屬性，這里的過渡屬性可以設置任意的屬性為值，我們也可以直接將它的值設置為all，表示每個產生變化的屬性都產生動畫效果。
- transition-duration(過渡所需時間)：
該屬性主要用來設置一個屬性過渡到另一個屬性所需的時間，也就是從舊屬性過渡到新屬性花費的時間長度，俗稱持續時間。單位為s。
例
.exp{
width:150px;
height:150px;
background:red;
transition-property:width;
transition-duration:1s;
}
.exp:hover{
width:300px;
}
當鼠標移動到盒子上時，盒子緩慢得拉長。
3. transition-timing-function(動畫--過渡函數) :
該屬性表示的是當動畫發生時，動畫的表現效果。其值有：
ease:默認值，逐漸變慢(cubic-bezier(0.25,0.1,0.25,1))
linear:勻速過渡效果(等於 cubic-bezier(0,0,1,1))
ease-in:加速的過渡效果(等於 cubic-bezier(0.42,0,1,1))
ease-out:減速的過渡效果(等於 cubic-bezier(0,0,0.58,1))
ease-in-out:加速然后減速(等於cubic-bezier (0.42, 0, 0.58, 1.0))
cubic-bezier(n,n,n,n)：在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。(動畫速度自定義)
4.transition-delay(動畫--過渡延遲時間)：
transition-delay主要用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值后多長時間開始執行。
例：
.exp{
width:150px;
height:150px;
background:red;
transition-property:width;
transition-duration:1s;
transition-delay:1s;
}
.exp:hover{
width:300px;
}
當鼠標移到盒子上時，盒子的寬度變為了300px，之后過了一秒鍾，產生動畫效果。
將以上多個屬性連在一起，則可寫為：
transition：[ none | <transition-property> ] || < transition-duration > || <transition-timing-function> || < transition-delay> [,*]
例：
.exp{
width:150px;
height:150px;
background:red;
transition:width 1s ease 1s;
}
.exp:hover{
width:300px;
}