css3之transform-origin

CSS3之 transform-origin

 

    -----------------变形原点，该元素围绕着哪个点变形或者旋转，配合着transform属性一起用。

 

 

 1、语法：

 

  transform-origin： x-axis y-axis z-axis;

 

  2、取值：

 

  默认值为 50% 50% 0

 

 

  3、兼容性：

 

 

 

注释：

 

• Internet Explorer supports an alternative, the -ms-transform-origin property, but only for 2D-transforms.
• Firefox supports an alternative, the -moz-transform-origin property, but only for 2D-transforms.

   

• Opera supports an alternative, the -o-transform-origin property, but only for 2D-transforms.
• Safari and Chrome supports an alternative, the -webkit-transform-origin property, on both 2D- and 3D-transfoms.

#test{
   transform-origin:  20% 30%;
   -ms-transform-origin:  20% 30%;       //IE9
   -webkit-transform-origin: 20% 30%;  //safari chrome
   -moz-transform-origin:  20% 30%;  //ff
   -o-transform-origin:  20% 30%;   //opera

 

 

 

扩展阅读：

 

1、http://www.w3schools.com/cssref/css3_pr_transform-origin.asp