1.Css32D轉(zhuǎn)換（translate，rotate，scale，skew，matrix）

轉(zhuǎn)換方法：

1.translate()方法，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動。
Eg：translate(50px,100px) 是從左邊元素移動50個像素，并從頂部移動向下100像素。
2.rotate( )方法，在一個給定度數(shù)順時針旋轉(zhuǎn)的元素。負(fù)值是允許的，這樣是元素逆時針旋轉(zhuǎn)。（正值順時針旋轉(zhuǎn)，負(fù)值逆時針旋轉(zhuǎn)）
Eg:rotate值（30deg）元素順時針旋轉(zhuǎn)30度。
3.scale( )方法，將該元素放大或縮小，取決于寬度（X軸）和高度（Y軸）的參數(shù)。
Eg：scale（2,3）轉(zhuǎn)變寬度為原來的大小的2倍，和其原始大小3倍的高度。
4.skew( )方法，包含兩個參數(shù)值，分別表示是X軸和Y軸傾斜的角度，如果第二個參數(shù)為空，則默認(rèn)為0，參數(shù)為負(fù)表示向相反方向傾斜。
skewX(<angle>);表示只在X軸(水平方向)傾斜。
skewY(<angle>);表示只在Y軸(垂直方向)傾斜。
Eg：skew(30deg,20deg) 元素在X軸傾斜20度，Y軸傾斜上30度。
5.matrix( )方法，matrix()方法和2D變換方法合并成一個。
matrix 方法有六個參數(shù)，包含旋轉(zhuǎn)，縮放，移動（平移）和傾斜功能。
Eg：transform:matrix(0.866,0.5,-0.5,0.866,0,0);

matrix(n,n,n,n,n,n 定義 2D 轉(zhuǎn)換，使用六個值的矩陣。
translate(x,y) 定義 2D 轉(zhuǎn)換，沿著X軸和Y軸移動的元素
scale(x,y) 定義 2D 縮放轉(zhuǎn)換,改變元素的寬和高的放大或縮小倍數(shù)
skew(x,y) 沿著X軸和Y軸傾斜角度
rotate(angle) 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度，只有一個參數(shù)

2.Css3 3D轉(zhuǎn)換(translate,scale,rotate)

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉(zhuǎn)換，使用 16 個值的 4x4 矩陣。
translateX(x) 定義 3D 轉(zhuǎn)化，僅使用用于 X 軸的值。
translateY(y) 定義 3D 轉(zhuǎn)化，僅使用用于 Y 軸的值。
translateZ(z) 定義 3D 轉(zhuǎn)化，僅使用用于 Z 軸的值。
scale3d(x,y,z) 定義 3D 縮放轉(zhuǎn)換。
scaleX(x) 定義 3D 縮放轉(zhuǎn)換，通過給定一個 X 軸的值。
scaleY(y) 定義 3D 縮放轉(zhuǎn)換，通過給定一個 Y 軸的值。
scaleZ(z) 定義 3D 縮放轉(zhuǎn)換，通過給定一個 Z 軸的值。
rotate3d(x,y,z,angle) 定義 3D 旋轉(zhuǎn)。
rotateX(angle) 定義沿 X 軸的 3D 旋轉(zhuǎn)。
rotateY(angle) 定義沿 Y 軸的 3D 旋轉(zhuǎn)。
rotateZ(angle) 定義沿 Z 軸的 3D 旋轉(zhuǎn)。
perspective(n) 定義 3D 轉(zhuǎn)換元素的透視視圖。

backface-visibility 屬性定義當(dāng)元素不面向屏幕時是否可見。如果在旋轉(zhuǎn)元素不希望看到其背面時，該屬性很有用。
backface-visibility: visible/hidden; visible 背面是可見的.hidden背面是不可見的。

3.Css3過渡(transition)

CSS3 過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。
要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容：

• 指定要添加效果的CSS屬性 。
• 指定效果的持續(xù)時間。

1. transition 單個元素
例如：transition: width 2s;是指當(dāng)鼠標(biāo)指針懸浮(:hover)于 <div>元素上時 是指達(dá)到指定寬度要兩秒。當(dāng)鼠標(biāo)光標(biāo)移動到該元素時，它逐漸改變它原有樣式。
2.transition 多個元素 要添加多個樣式的變換效果，添加的屬性由逗號分隔：
例如：transition: width 2s, height 2s, transform 2s;當(dāng)鼠標(biāo)懸浮，同時開始寬度，高度，以及轉(zhuǎn)換。

<style> 
div { width: 100px;
     height: 100px;
     background: red;
     transition: width 2s, height 2s, transform 2s;}
div:hover {
    width: 200px;/*寬度從100px放大到200px需要兩秒*/
    height: 200px;/*長度從100px放大到200px需要兩秒*/
    transform: rotate(180deg);}/*順時針180度旋轉(zhuǎn)*/
</style>

<style>
div{   width:100px;
    height:100px;
    background:red;
    transition-property:width; /*規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。*/
    transition-duration:1s;/* 定義過渡效果花費(fèi)的時間。默認(rèn)是 0。（1s達(dá)到效果）*/
    transition-timing-function:linear;/*規(guī)定過渡效果的時間曲線。默認(rèn)是 "ease"。*/
    transition-delay:2s;/*規(guī)定過渡效果何時開始。默認(rèn)是 0. （延遲兩秒）*/
}
div:hover{
    width:200px;
}
</style>

簡寫方式：

<style> 
div{
    width:100px;
    height:100px;
    background:red;
    transition:width 1s height 1s  linear 2s;/*寬度一秒，長度一秒*/
}
div:hover{
    width:200px;
    height:200px;
}

transition-property 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費(fèi)的時間。默認(rèn)是 0。（1s達(dá)到效果）
transition-timing-function 規(guī)定過渡效果的時間曲線。默認(rèn)是 "ease"。transition-delay 規(guī)定過渡效果何時開始。默認(rèn)是 0.