html 变形属性 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：过度完成事件function addEnd(obj,fn){

obj.addEventListener('WebkitTransitionEnd',fn,false);

obj.addEventListener('transitionend',fn,false);

}

function removeEnd(obj,fn){

obj.removeEventListener('WebkitTransitionEnd',fn,false);

obj.removeEventListener('transitionend',fn,false);

}注：1在transition里，如果写了多个，那没改变一次样式，就会触发一次事件

2注意重复触发transitionend事件。比如下面重复改变p的y轴位置

Title

#nav{position: absolute;left:0;top:0;width: 100px;height: 100px;background: gray;transition: 1s all;}

var oHome=document.getElementById("nav");

var count = 10;

oHome.onclick = function(){

count += 20;

oHome.style.transform = 'translate(0,'+ count +'px)'

addEnd(this,function(){

count += 20;

oHome.style.transform = 'translate(0,'+ count +'px)'

})

}

function addEnd(obj,fn) {

obj.addEventListener('WebkitTransitionEnd',fn,false);

obj.addEventListener('transitionend',fn,false);

}

transform：变形旋转：rotate()：度数

斜切：skew()：度数skewX

skewY

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

scaleY

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

translateYtransform的执行顺序：后写的先执行transform: scale(2) rotate(50deg);先执行旋转，在执行缩放

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