transform 所做的一系列变换，都仅仅只是这个元素的样子，元素自身所在文档流中所占用的位置不会发生变化，所以是不会影响到其他元素的位置的
2D
translate：平移，这点类似于 relative+top+left 的效果
skew（x，y）：翻转，180deg 和 0deg 的效果是一致的，翻转的时候，两侧是保持原来一样平齐的，因为这是2D的，所以虽然说是翻转，但是给人感觉很奇怪，有点像是拉伸的感觉
绕Y轴旋转 绕X轴旋转
ratate：可理解成是绕z轴（垂直于屏幕）的旋转，而skew是绕x（水平方向）、y（上下方向）轴的旋转
matrix：transform只能有单个值（类似于上面的函数进行函数调用），所以不能纯粹把上面的东西简单用逗号组合在一起，通过使用matrix来实现各种效果的混合
3D
transform-origin（x，y）
transform所做的任何变换都是基于一个基准点，默认的基准点就是元素的中心，可以通过transform-origin来改变变换的基准点
中点（默认值）：transform-origin: 50% 50%;
左上角：transform-origin: 0% 0%;
css3-transform
原文地址：http://www.cnblogs.com/hellohello/p/7530786.html