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 ;
-->