css变形 transform【转】

transition：过度属性

• transition-property 规定设置过度效果的css属性的名称，默认可以写all

• transition-duration 规定完成过度效果需要多少秒或毫秒

• transition-timing-function: 默认easetransition-delay：延时时间

  • ease:逐渐变慢
  • linear:匀速
  • ease-in:加速
  • ease-out:减速
  • ease-in-out:先加速在减速
  • cubic-bezier：贝塞尔曲线　　

 transitionend：过度完成事件

1 function addEnd(obj,fn){
2     obj.addEventListener('WebkitTransitionEnd',fn,false);
3     obj.addEventListener('transitionend',fn,false);
4 }
5 function removeEnd(obj,fn){
6     obj.removeEventListener('WebkitTransitionEnd',fn,false);
7     obj.removeEventListener('transitionend',fn,false);
8 }

注：1在transition里，如果写了多个，那没改变一次样式，就会触发一次事件
　　2注意重复触发transitionend事件。比如下面重复改变div的y轴位置

 

transform：变形

• 旋转：rotate()：度数

• 斜切：skew()：度数

  • skewX
  • skewY　　

• 缩放：scale()：正数、负数、小数

  • scaleX
  • scaleY

• 位移：translate()：css支持的单位都可以

  • translateX
  • translateY　　

• transform的执行顺序：后写的先执行

  • transform: scale(2) rotate(50deg);　先执行旋转，在执行缩放　

以上transform的值，也会根据中心点（transform-origin）来改变

练习：时钟demo

转载自：http://www.cnblogs.com/wmh1106/p/6064708.html