CSS3之過渡及2D變換

transition過渡
transition-duration:; 運動時間
transition-delay:; 延遲時間
transition-timing-function:; 運動形式
　　　　　　　　　　ease 逐漸變慢 (預設)
　　　　　　　　　　linear 勻速
　　　　　　　　　　ease-in 加速
　　　　　　　　　　ease-out 減速
　　　　　　　　　　ease-in-out 先加速後減速
　　　　　　　　　　cubic-bezier 貝塞爾曲線(x1,y1,x2,y2) 通過控制曲線走勢來改變運動效果

註:多樣式同時進行過渡(需要非同步過渡 則需在完成時間後再加一個參數:延遲時間)

例:transition:1s width,2s 1s height,3s 3s background;

transitionend事件(transition結束後觸發的事件)
註意:1.每改變元素一個樣式 會觸發一次tranasitionend

在webkit內核中寫法:
obj.addEventListener('WebkitTransitionEnd',fn,false);
在標準下寫法:
obj.addEventListener('transitionend',fn,false);

-transform:; 變換
rotate(30deg) 旋轉 圍繞元素中心點旋轉30度
skewX(45deg) 斜切 沿X軸向左拉伸45度
skewY(45deg) 斜切 沿Y軸向上拉伸45度
綜合寫法 skew(45deg,45deg)
scaleX(2) 縮放 由中心點沿X軸向外擴展2倍
scaleY(0.5) 縮放 由中心點沿Y軸向內收縮2倍
綜合寫法 scale(2,0.5)
translateX(100px) 位移 從左往右移動100px
translateY(-100px) 位移 從下往上移動100px
綜合寫法 translate(100px,-100px)

註:transform 執行順序 -- 後寫先執行!

例:-webkit-transform:translateX(100px) scale(0.5); 與 -webkit-transform:scale(0.5) translateX(100px);

　　第一條樣式先縮放0.5倍 再執行位移100px
　　第二條樣式先執行平移100px 再縮放0.5倍 這時100px會隨著縮放被縮放成50px

-transform-origin:; 變換基點
其值可為像素也可為關鍵字

-transform:matrix(); 矩陣
旋轉 位移 縮放 斜切 都是通過matrix封裝實現

matrix(1,0,0,1,0,0) 標準下 預設6個參數
(

matrix(a,b,c,d,e,f);

縮放
a,c,e表示X軸縮放 X軸縮放:a:a*縮放倍數 c:c*縮放倍數 e:e*縮放倍數 (e/c預設為0);
b,d,f表示Y軸縮放 Y軸縮放:b:b*縮放倍數 d:d*縮放倍數 f:f*縮放倍數 (f/d預設為0);

斜切
c同時表示X軸斜切 c=Math.tan(Deg/180*Math*PI)
b同時表示Y軸斜切 b=Math.tan(Deg/180*Math*PI)

位移
e:X軸的位移 位移的長度e+x;(e,f預設值為0)
f:Y軸的位移 位移的長度f+y;

旋轉
a/b/c/d共同控制旋轉
a = Math.cos(deg/180*Math*PI)
b = Math.sin(deg/180*Math*PI)
c = -Math.sin(deg/180*Math*PI)
d = Math.cos(deg/180*Math*PI)
)
相容IE6及以上 缺少位移2個參數
progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
Matrix( M11= a, M12= c, M21= b , M22=d,SizingMethod='auto expand');
(

註意 IE下旋轉不是圍繞元素中心點旋轉
解決方案:控制元素left/top;
left = (父級offsetWidth-本身offsetWidth)/2
top = (父級offsetHeight-本身offsetHeight)/2
)