關於CSS3的小知識點之2D變換

標籤：duration   mat   知識點   end   for   cal   html   解決方案   webkit   

 

 

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)

轉載自:chun6.html

關於CSS3的小知識點之2D變換