transform-origin属性

以下是我自己的理解，有错误请各位指正，谢谢！

W3CSchool的定义是：允许你改变被转换元素的位置,2D元素能够改变元素X轴和Y轴。3D转换元素还能改变其Z轴。

默认值：50% 50% 0

浏览器支持：

1、IE10、Firefox、opera支持transform-origin属性；

2、IE9支持替代的-ms-transform-origin属性（仅适用于2D转换）；

3、Safari和chrome支持替代的-webkit-transform-origin属性（3D和2D转换）。

那么该如何理解呢？

我的理解是transform-origin是在坐标轴上定义元素的中心基点，那此处我们首先要明确坐标轴以及中心基点。

每个元素的左上角为坐标轴原点，水平方向为X轴，垂直方向为Y轴。那么在我们没有设置transform-origin的时候，默认中心基点是（50%，50%，0），此处中心基点是相对于坐标轴原点的。

transform有translate、rotate、scale、skew四种变换，对应如下：

1、当值为translate时，移动的距离是绝对值，与transform-origin无关。不论是

translate（x,y）

或

matrix（1,0,0,1,x,y）

（元素沿X轴和Y轴移动的距离为（x-Ox,y-Oy））设置，只要x和y相同，移动的效果总是相同的，从坐标轴原点分别向X轴和Y轴移动相应的距离。

2、当值为rotate、scale、skew时，则围绕transform-origin定义的中心基点进行变换。