css3之变形transform

css3新增的transform属性会使我们的页面更具有灵动性

transform有一下几个属性：translate（平移）、scale（缩放）、rotate旋转、skew扭曲

其变形的起始点即原点是transform-origin控制的

transform具体用法如下：

例如一个图片要实现鼠标放上去产生旋转缩放的效果，那么要设置

img:hover{

transform:rotate(360deg) scale(1.5);

}

这样设置的话我们看不到旋转的效果，主要是因为变形过渡的时间太短；此时我们要加上transition属性,具体使用如下

img{

transition:all(可为元素的单个属性或是全部属性) 800ms（变形过渡的时间） linear（变形的速度此为匀速） 1s（触发变形的延迟时间）

}

可以看出transform要加在作用效果上如hover、target等，transition则是要加在被变形的元素上