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
)