关于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)

转载自:chun6.html