CSS3 变形(Transformation)
/* 该属性下所有的书写规则都需写这三个前缀*/ -webkit-transform/-moz-transform/-o-transform
rotate
/* 元素逆时针旋转90度 */ rotate(-90deg);
Rotate(旋转)允许你通过传递一个度数值来转动一个对象。
IE有这方面的滤镜:图形旋转滤镜。它可以有4个旋转值：0, 1, 2,和3。filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
scale
/* 宽和高都会被放大双倍 */ scale(2); /* 宽会是双倍，而高度保持不变 */ scale(2, 1); /* nav的宽度将是双倍，并且水平翻转，但是高度保持不变 */ scale(-2, 1);
scale(缩放)同时采用宽和高两个值，这些值可以是正数、负数和小数。正数放大倍数，负数反转，小数缩小倍数。支持小数点。
IE不支持该属性。
translate
/* 元素向左移动10像素并向下移动20像素 */ translate(10px, 20px);
translate(移动)在原有布局定位的基础上移动，不影响其他元素布局。IE不支持该属性。
skew
/* 元素x轴向上倾斜30度，y轴向左倾斜10度 */ skew(30deg, -10deg);
skew(倾斜)在原有布局定位的基础上移动，不影响其他元素布局。IE不支持该属性。
根据倾斜角度的不同，元素可能会被拉长也可能会被缩小。
上述css3动画都可以链式书写eg:
translate(10, 25) rotate(90deg) scale(2, 1);
使用transform-origin（-moz-transform-origin/-webkit-transform-origin/-o-transform-origin）可以指定transform变形的起点。eg:
/*以元素左上角的点为基准*/ transform-origin: 0 0; /*以元素右下角的点为基准*/ transform-origin:100% 100%; /*以元素左上角的点为基准*/ transform-origin:top left;
CSS3 转换(transition)
一个涉及到CSS属性的基本的转换就是定义和移动一个元素从它的静止状态(比如，深蓝色背景)到它的hover或者激活状态(比如，浅蓝色背景)。
转换可以和变形同时使用(以及引发诸如:hover 或:focus事件)以创建一些动画。淡出背景色彩，滑动一个元素以及让一个对象旋转都可以通过CSS转换实现。
/*一下transition都需要添加这些前缀*/ -webkit-transition-property/-moz-transition-property/-o-transition-property
transition-property
/*指定元素background-color的样式变化时使用转换动画*/ transition-property:background-color;
指定转换的CSS属性名称
transition-duration
/*指定元素转换时间需要2s*/ transition-duration:2s;
定义转换花费的时间（从旧属性换到新属性花费的时间）
transition-timing-function
/*元素转换时的动画效果为ease-in*/ transition-timing-function：ease-in;
过度效果。指定转换过程中的中间值。可以用cubic-bezier指定。当然有几个常用的内置值：ease | linear | ease-in | ease-out | ease-in-out。
transition-delay
/*元素转换时延迟2s*/ transition-delay：2s;
转换延迟的时间。时间可以为正整数、负整数和零，非零的时候必须设置单位是s(秒)或者ms(毫秒)，为负数的时候，转换的动作会从该时间点开始显示，之前的动作被截断。
CSS3 动画(animation)
CSS3 动画可以将之前的转换（transition）以帧的形式“动”起来。
/* 该属性下所有的书写规则都需写这三个前缀*/ -webkit-animation/-moz-animation/-o-animation
animation-name
动画的名称。必须，以后者keyframes结合使用。
animation-duration
定义动画播放一次需要的时间。默认为0，其实是必须的否则没有效果。
animation-timing-function
定义动画播放的方式，参数linear(线性常用)/ease (默认动画函数)/ease-in/ease-out/ease-in-out/cubic-bezier(x1, y1, x2, y2)/step-start。
详细可自行找资料。
animation-delay
定义动画开始的时间，默认0。
animation-iteration-count
定义循环的次数，infinite即为无限次。默认是1。
animation-direction
动画播放的方向，normal（默认）/alternate(第偶数次向前播放，第奇数次向反方向播放)。
定义为元素animation样式后，需要定义动画keyframes。eg:
/*动画名为abc的运动帧，同样需要加前缀eg：@-moz-keyframes*/
@keyframes abc{
0 {-moz-transform:rotate(0deg);}
25% {-moz-transform:rotate(90deg);}
50% {-moz-transform:rotate(180deg);}
75% {-moz-transform:rotate(270deg);}
100%{-moz-transform:rotate(360deg);}
}