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

轉(zhuǎn)換方法：

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

matrix(n,n,n,n,n,n 定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。
translate(x,y) 定義 2D 轉(zhuǎn)換，沿著X軸和Y軸移動(dòng)的元素
scale(x,y) 定義 2D 縮放轉(zhuǎn)換,改變?cè)氐膶捄透叩姆糯蠡蚩s小倍數(shù)
skew(x,y) 沿著X軸和Y軸傾斜角度
rotate(angle) 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度，只有一個(gè)參數(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 個(gè)值的 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)換，通過(guò)給定一個(gè) X 軸的值。
scaleY(y) 定義 3D 縮放轉(zhuǎn)換，通過(guò)給定一個(gè) Y 軸的值。
scaleZ(z) 定義 3D 縮放轉(zhuǎn)換，通過(guò)給定一個(gè) 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)元素不面向屏幕時(shí)是否可見(jiàn)。如果在旋轉(zhuǎn)元素不希望看到其背面時(shí)，該屬性很有用。
backface-visibility: visible/hidden; visible 背面是可見(jiàn)的.hidden背面是不可見(jiàn)的。

3.Css3過(guò)渡(transition)

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

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

1. transition 單個(gè)元素
例如：transition: width 2s;是指當(dāng)鼠標(biāo)指針懸浮(:hover)于 <div>元素上時(shí) 是指達(dá)到指定寬度要兩秒。當(dāng)鼠標(biāo)光標(biāo)移動(dòng)到該元素時(shí)，它逐漸改變它原有樣式。
2.transition 多個(gè)元素 要添加多個(gè)樣式的變換效果，添加的屬性由逗號(hào)分隔：
例如：transition: width 2s, height 2s, transform 2s;當(dāng)鼠標(biāo)懸浮，同時(shí)開(kāi)始寬度，高度，以及轉(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;/*長(zhǎng)度從100px放大到200px需要兩秒*/
    transform: rotate(180deg);}/*順時(shí)針180度旋轉(zhuǎn)*/
</style>

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

簡(jiǎn)寫(xiě)方式：

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

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