【1】CSS3中特別重要的transform中的rotate()，現(xiàn)在transform可以將元素進(jìn)行2D和3D變形。

2D transform常用的transform-function的功能:

      translate()：用來(lái)移動(dòng)元素，可以根據(jù)X軸和Ｙ軸坐標(biāo)重新定位元素位置。在此基礎(chǔ)上有兩個(gè)擴(kuò)展函數(shù)：translateX()和translateY()。

scale()：用來(lái)縮小或放大元素，可以使用元素尺寸發(fā)生變化。在此基礎(chǔ)上有兩個(gè)擴(kuò)展函數(shù)：scaleX()和scaleY()。rotate()：用來(lái)旋轉(zhuǎn)元素。

skew()：用來(lái)讓元素傾斜。在此基礎(chǔ)上有兩個(gè)擴(kuò)展函數(shù)：skewX()和skewY()。

matrix()：定義矩陣變形，基于X軸和Y軸坐標(biāo)重新定位元素位置。

3D transform常用的transform-function的功能:

translate3d()：移元素元素，用來(lái)指定一個(gè)3D變形移動(dòng)位移量translate()：指定3Ｄ位移在Ｚ軸的位移量。

scale3d()：用來(lái)縮放一個(gè)元素。scaleZ():指定Z軸的縮放向量。

rotate3d()：指定元素具有一個(gè)三維旋轉(zhuǎn)的角度。

rotateX()、rotateY()和rotateZ()：讓元素具有一個(gè)旋轉(zhuǎn)角度。

perspective()：指定一個(gè)透視投影矩陣。

matrix3d()：定義矩陣變形。

這里我們只需要2D中的rotate()屬性用來(lái)旋轉(zhuǎn)元素，

注意：旋轉(zhuǎn)的角度以順時(shí)針?lè)较驗(yàn)檎ò错槃?shì)正方向角度增大）

其他屬性的用法可以參考這里W3cplus

【2】transfrom-origin

指定變形的原點(diǎn)，默認(rèn)是在元素的中心，可以接受一到三個(gè)參數(shù)，分別表示變形原點(diǎn)X軸、Y軸、Z軸的位置（可以實(shí)現(xiàn)許多有趣的旋轉(zhuǎn)）

【3】transition

過(guò)渡transition是一個(gè)復(fù)合屬性，包括transition-property、transition-duration、transition-timing-function、transition-delay這四個(gè)子屬性。通過(guò)這四個(gè)子屬性的配合來(lái)完成一個(gè)完整的過(guò)渡效果

transition-property: 過(guò)渡屬性(默認(rèn)值為all)

transition-duration: 過(guò)渡持續(xù)時(shí)間(默認(rèn)值為0s)

transiton-timing-function: 過(guò)渡函數(shù)(默認(rèn)值為ease函數(shù))

transition-delay: 過(guò)渡延遲時(shí)間(默認(rèn)值為0s)
想要詳細(xì)了解該屬性可以參考深入理解CSS過(guò)渡transition

【4】CSS3 :nth-of-type(n) 選擇器

選擇器匹配屬于父元素的特定類(lèi)型的第 N 個(gè)子元素的每個(gè)元素

好暈，還是來(lái)看個(gè)例子：

我想了解如何學(xué)習(xí)

姓名：
手機(jī)：
留言：