以下是我自己的理解，有错误请各位指正，谢谢！
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定义的中心基点进行变换。