在css3中transform主要包括以下几种：rotate（旋转）、translate（移动）、scale（缩放）、skew（扭曲）以及matrix（矩阵变形）。
语法：
transform ： none | <transform-function> [ <transform-function> ]* 也就是：transform: rotate | scale | skew | translate |matrix;</transform-function></transform-function>
下面对每个属性一一介绍：
rotate（旋转）：
通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(50deg)
translate（移动）：
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）。如transform:translate(100px,20px)。
scale（缩放）：
scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。如：transform:scale(2,1.5)。
skew（扭曲）：
skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）。如：transform:skew(30deg,10deg)。
matrix（矩阵变形）：
matrix(
如何改变元素基点transform-origin
transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom，这个看上去有点像我们background-position设置一样。如：transform-origin:(left,top)。
transform在不同浏览器内核下的书写规则
/*Mozilla内核浏览器：firefox3.5+*/ -moz-transform: rotate | scale | skew | translate ; /*Webkit内核浏览器：Safari and Chrome*/ -webkit-transform: rotate | scale | skew | translate ; /*Opera*/ -o-transform: rotate | scale | skew | translate ; /*IE9+*/ -ms-transform: rotate | scale | skew | translate ; /*标准*/ transform: rotate | scale | skew | translate ;
