CSS3 transform是什么？
transform的含义是：改变，使…变形；转换
CSS3 transform都有哪些常用属性？
transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。
下面我们来分解各个属性的用法：
transform:rotate()：
含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”。
.demo_transform1{transform:rotate(10deg);-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg); }
transform:skew()：
含义：倾斜；其中“deg”是“度”的意思，如“20deg”表示“10度”。
.demo_transform2{transform:skew(20deg);-webkit-transform:skew(20deg);-moz-transform:skew(20deg); }
transform:scale(x,y)：
含义：比例；可传2个值，当写一个时，表示xy都一样，“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。
.demo_transform2{transform:scale(1.5);-webkit-transform:scale(1.5);-moz-transform:scale(1.5); }
transform:translate(x,y)：
含义：变动，位移；可以传3个值，x、y。
也可以写成 translateX( ), translateY( ).
如表示向右位移100像素，即第一个值为100px，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。
.demo_transform2{transform:translate(100px,0);-webkit-transform:translate(100px,0);-moz-transform:translate(100px,0); }
或者
.demo_transform2{transform:translateX(100px);-webkit-transform:translateX(100px);-moz-transform:translateX(100px); }
CSS3 transition 过度效果
当鼠标经过时，宽度边为300px,时长为 2 秒：
div{ width:200px; } div{ transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ } div:hover { width:300px; }
transition有4个属性:
1、transition-property：规定应用过渡的 CSS 属性的名称。with可获得宽度属性，height可获得高度属性，transform可获得动画属性，all 可以获取所有属性，所以推荐写all
2、transition-duration：定义过渡效果花费的时间。默认是 0。
3、transition-timing-function：规定过渡效果的时间曲线。默认是 "ease"。有5个属性，分别为：
- linear--匀速 规定以相同速度开始至结束的过渡效果
- ease--慢-快-慢 规定慢速开始，然后变快，然后慢速结束的过渡效果
- ease-in--慢-快 规定以慢速开始的过渡效果
- ease-out--快-慢 规定以慢速结束的过渡效果
- ease-in-out--慢-快-慢 规定以慢速开始和结束的过渡效果
4、transition-delay：规定过渡效果何时开始。默认是 0。
4个属性可以合起来写
div{transition: all 1s linear .5s;/*4个属性分别表示：所有属性都有动作效果、动作时间为1S、速度为匀速、延迟0.5S开始动画*/ }
