css3-transform

transform 所做的一系列变换，都仅仅只是这个元素的样子，元素自身所在文档流中所占用的位置不会发生变化，所以是不会影响到其他元素的位置的

2D

translate：平移，这点类似于 relative+top+left 的效果

skew（x，y）：翻转，180deg 和 0deg 的效果是一致的，翻转的时候，两侧是保持原来一样平齐的，因为这是2D的，所以虽然说是翻转，但是给人感觉很奇怪，有点像是拉伸的感觉

　　绕Y轴旋转                    绕X轴旋转

　　              

ratate：可理解成是绕z轴（垂直于屏幕）的旋转，而skew是绕x（水平方向）、y（上下方向）轴的旋转

matrix：transform只能有单个值（类似于上面的函数进行函数调用），所以不能纯粹把上面的东西简单用逗号组合在一起，通过使用matrix来实现各种效果的混合

3D

第一个要点是在父级元素上设置透视（透视声明只会应用到其第一个子元素上）：-webkit-perspective: 200;

　　透视的值越大，就表示你的视点与 3D场景之间的景深越大。因此，如果想要一点隐约的 3D 效果，就增大透视值；如果想要非常明显的 3D 效果，则减小透视值

下一个要点：-webkit-transform-style: preserve-3d;

　　为了延续父元素的透视，我们给以上父容器中第一个子元素设定了 preserve-3d

transform-origin（x，y）

 transform所做的任何变换都是基于一个基准点，默认的基准点就是元素的中心，可以通过transform-origin来改变变换的基准点

中点（默认值）：transform-origin: 50% 50%;    

左上角：transform-origin: 0% 0%;