css3-transform

标签：简单   函数调用   9.png   nsf   transform   color   family   com   origin   

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

标签：简单   函数调用   9.png   nsf   transform   color   family   com   origin   

原文地址：http://www.cnblogs.com/hellohello/p/7530786.html