過渡方法：常和僞元素搭配使用，比如，鼠標懸停停在div上時，div由一種樣式轉變成另一種樣式。
必須指定要添加效果的CSS屬性(eg:width、height等)
必須指定效果的持續時間。
給div先設置基本樣式 div{ width：100px;
height:100px;
background:red;
transition：all 3s linear 2s;
(過渡名稱、花費的時間、曲線、延遲開始的時間)
//有些事件，若只寫這裏而不給下面寫的話，當過渡完成後，
不會自動回到原來的div狀態，所以我們也需要在上面給它添加過渡
（然後hover不用）
需要做兼容處理的話再加-webkit- /-o- / -ms- / -moz- transition
}
div:hover{
width:400px;
height:400px;
background:blue; }
2D轉換
變換方法有
transform+ translate()、rotate()、scale()、skew()、matrix()
注意[2d 3d 同]
Chrome 和 Safari 要求前綴 -webkit- 版本..
Internet Explorer 9 要求前綴 -ms- 版本…
1、translate（）方法， 【平移】
根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。
div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); -webkit-transform: translate(50px,100px); }
2、rotate()方法 【旋轉】
在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
transform: rotate(30deg);//rotate值（30deg）元素順時針旋轉30度。
3、scale()方法 【縮放】
該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數：
transform: scale(2,3);
/* scale（2,3）轉變寬度爲原來的大小的2倍，和其原始大小3倍的高度。*/
4、skew() 方法 【傾斜】
用法： transform:skew(< angle> [,< angle>]); //角度單位爲deg
transform: skew(30deg,20deg); //元素在X軸和Y軸上傾斜20度30度
5、matrix() 方法 【方法合併】
matrix()方法和2D變換方法合併成一個。
matrix（） 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。
函數 描述
| 函數 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定義 2D 轉換，使用六個值的矩陣 |
| translate(x,y) | 定義 2D 轉換，沿着 X 和 Y 軸移動元素 |
| translateX(n) | 定義 2D 轉換，沿着 X 軸移動元素。 |
| translateY(n) | 定義 2D 轉換，沿着 Y 軸移動元素。 |
| scale(x,y) | 定義 2D 縮放轉換，改變元素的寬度和高度 |
| scaleX(n) | 定義 2D 縮放轉換，改變元素的寬度 |
| scaleY(n) | 定義 2D 縮放轉換，改變元素的高度。 |
| rotate(angle) | 定義 2D 旋轉，在參數中規定角度。 |
| skew(x-angle,y-angle) | 定義 2D 傾斜轉換，沿着 X 和 Y 軸。 |
| skewX(angle) | 定義 2D 傾斜轉換，沿着 X 軸。 |
| skewY(angle) | 定義 2D 傾斜轉換，沿着 Y 軸。 |
3D
transform+以下方法
rotateX() 方法。圍繞其在一個給定度數X軸旋轉的元素。
rotateY()方法。圍繞其在一個給定度數Y軸旋轉的元素。
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 與 Chrome */
}
詳見請點擊跳轉 3D轉換屬性
