CSS3---2D變換，css3變換

CSS3---2D變換，css3變換

transform

　　transition-origin：設定對象中變換所參照的原點

　　none:無變換

　　translate(<length>[,<length>]):指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設是為0.

　　　　translateX(<length>):指定對象X軸平移

　　　　translateY(<length>):指定對象Y軸平移

　　rotate(<angle>):指定對象的2D rotation（2D 旋轉），需要現有transtion-origin屬性的定義

　　scale(<number>[,<number>]):指定對象的2D scale（2D縮放）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設取第一個參數。

　　　　scaleX(<number>):指定對象X軸的（水平方向）縮放

　　　　scaleY(<number>):指定對象Y軸的（豎直方向）縮放

　　skew(<number>):指定對象的skew transformation（斜切扭曲）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設是為0.

　　　　skewX(<number>):指定對象Y軸的（水平方向）扭曲

　　　　skewY(<number>):指定對象Y軸的（水平方向）扭曲

 

過渡：

transtion:[transtion-property]||[transtion-duration]||[transtion-timing-function]||[transtion-delay]

　　transtion-property:檢索或設定對象中的參與過渡的屬性 default

　　transtion-duration:檢索或設定對象過渡的期間

　　transtion-timing-function:檢索或設定對象過渡的動畫類型

　　transtion-delay:檢索或設定對象延遲過渡的時間

 

動畫：

animation:[animation-name]||[animation-duration]||[animation-timing-function]||[animation-delay]||[animation-iteration-count]||[animation-direction]

　　animation-name:檢索或設定對象所應用的動畫名稱

　　animation-duration:檢索或設定對象動畫的期間

　　animation-timing-function:檢索或設定對象動畫的過渡類型

　　animation-delay:檢索或設定對象動畫的延遲時間

　　animation-iteration-count:檢索或設定對象動畫的迴圈次數

　　animation-direction:檢索或設定對象動畫在迴圈中是否反向運動