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

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

      translate()：用來移動元素，可以根據(jù)X軸和Ｙ軸坐標重新定位元素位置。在此基礎(chǔ)上有兩個擴展函數(shù)：translateX()和translateY()。

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

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

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

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

translate3d()：移元素元素，用來指定一個3D變形移動位移量translate()：指定3Ｄ位移在Ｚ軸的位移量。

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

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

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

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

matrix3d()：定義矩陣變形。

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

注意：旋轉(zhuǎn)的角度以順時針方向為正（按順勢正方向角度增大）

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

【2】transfrom-origin

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

【3】transition

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

transition-property: 過渡屬性(默認值為all)

transition-duration: 過渡持續(xù)時間(默認值為0s)

transiton-timing-function: 過渡函數(shù)(默認值為ease函數(shù))

transition-delay: 過渡延遲時間(默認值為0s)
想要詳細了解該屬性可以參考深入理解CSS過渡transition

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

選擇器匹配屬于父元素的特定類型的第 N 個子元素的每個元素

好暈，還是來看個例子：

我想了解如何學習

姓名：
手機：
留言：