CSS3新特性

<!--在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
1.旋转  transform:rotate(angle)  rotate(2D旋转角度)eg:transform:rotate(30deg);

    2.移动  transform:translate(x.y) 或translate(x)或translate(y) eg:transform:translate(100px,30px);

    3.缩放  transform:scale(number) 类似于translate  eg:transform:scale(2,2.5);

    4.扭曲  transform:skew(angle)  同样类似于前两者

    5.矩阵  transform:matrix(a,b,c,d,e,f)

    -------------------------------

    改变元素基点transform-origin 

    eg:1.transform-origin:(left,top):  2.transform-origin:right  3.transform-origin(25%,75%) 

      transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。           
其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right;

Y和X一样除了百分值外还可以设置字符值top,center,bottom，这个看上去有点像我们background-position设置一样;

      

------------------------------------------

因为我们background-position不需要区别浏览器内核不同的写法，但transform-origin跟其他的css3属性一样，我们需要在不同的浏览内核中加上相应的前缀

下面列出各种浏览器内核下的语法规则：

//Mozilla内核浏览器：firefox3.5+

  -moz-transform-origin: x y;

  //Webkit内核浏览器：Safari and Chrome

  -webkit-transform-origin: x y;

  //Opera

  -o-transform-origin: x y ;

  //IE9

  -ms-transform-origin: x y;

  //W3C标准

  transform-origin: x y ;

------------------------------------------

 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 ;

 //W3C标准

  transform: rotate | scale | skew | translate ;

-->