css transform scale设置后位置角度总是变化问题

问题：利用了css3的新特性：-webkit-transform:scale(xx)后整个元素的位置发生了改变

原因：注意-webkit-transform:scale(xx);收缩的是***整个元素的大小 ***（这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/…）

	<div class="div1">
   		这是正常字体
   	</div>
   	
	<div class="div2">
		这是缩放后的字体
	</div>

	.div2 {
   		-webkit-transform: scale(0.75);
   	}

解决：transform-origin 属性

用来改变元素原点的位置，取值：

1、center 默认值 等价于（ center center / 50% 50%）
2、top/right/bottom/left
3、transform-origin : x y z

设置：

transform-origin: left ；//设置左边为原点，不是在左上角
transform-origin: 0% 0%；//设置左上角为原点

解决~