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
)【**
CSS3之過渡及2D變換
transition duration 運動時間 transition delay 延遲時間 transition timing function 運動形式 ease 逐漸變慢 預設 linear 勻速 ease in 加速 ease out 減速 ease in out 先加速後減速 cubic ...
CSS3之過渡及2D變換
transition過渡 transition duration 運動時間 transition delay 延遲時間 transition timing function 運動形式 ease 逐漸變慢 預設 linear 勻速 ease in 加速 ease out 減速 ease in out ...
CSS3漸變 過渡 2d變換
寫法 一 background gradient linear,起點 水平 垂直 終點，color stop 開始漸變的位置，顏色 注 color stop 開始漸變的位置，顏色 後面可以連著寫多個值。寫法 二 background webkit linear gradient 方向 角度 deg ...