css3属性transform-origin讲解

transform是CSS3里的变换属性，常用的有translate（平移）、rotate（旋转）、skew(倾斜)、scale(缩放)方法。而transform-origin并不是transform的属性值，其具有独立的语法，但值得注意的是，transform-origin必须配合transform来使用，这个从名字也可以看得出来，就是给transform设置的各种动作设置一个参考点。默认情况下，元素的动作参考点为元素盒子的中心。transform可以设置九个位置的值，水平方向有left | center | right 三个值，垂直方向也有三个，分别是 top | center |bottom ，故一共有九个。

语法：

transform-origin：[ | | left | center① | right ] [ | | top | center② | bottom ]?

• 默认值：50% 50%，效果等同于center center
• 适用于：所有块级元素及某些内联元素

取值：

• ：用百分比指定坐标值。可以为负值。
• ：用长度值指定坐标值。可以为负值。
• left：指定原点的横坐标为left
• center①：指定原点的横坐标为center
• right：指定原点的横坐标为right
• top：指定原点的纵坐标为top
• center②：指定原点的纵坐标为center
• bottom