首先先简单说一下transform：Matrix()各参数的含义：
transform: matrix(a,b,c,d,e,f);
a、d控制缩放，b、c控制旋转，e、f控制位移。
其中ef能够直接影响元素的坐标，缩放间接影响坐标，旋转对坐标没有影响。
所谓坐标X,Y其实就是元素的left跟top的值。transform: matrix(1, 0, 0, 1, 30, 30)就相当于top:30px;left:30px。
<style>
.matrix_box { width:200px; height:200px; background-color:#f00; position:absolute;top:30px;left:30px;text-align:right}
.matrix_box1 { width:100px; height:100px; background-color:#a0b3d6; transform: matrix(1, 0, 0, 1, 30, 30);position:absolute;top:0;left:0}
</style>
<div id=”matrixBox1″ class=”matrix_box”>我不是matrix</div>
<div id=”matrixBox1″ class=”matrix_box1″>我是matrix</div>
结果如图：
但是如果涉及到缩放，那么transform跟top、left就不一样了：
将以上transform代码改为transform: matrix(0.5, 0, 0, 0.5, 30, 30)；
.matrix_box1 { width:200px; height:200px; background-color:#a0b3d6; transform: matrix(0.5, 0, 0, 0.5, 30, 30);position:absolute;top:0;left:0}
效果如图：
造成这种现象的原因是transform: matrix先进行偏移再进行缩放的。
我们将以上代码拆开来看：
首先先不缩放：
.matrix_box1 { width:200px; height:200px; background-color:#a0b3d6; transform: matrix(1, 0, 0, 1, 30, 30);position:absolute;top:0;left:0}
效果如图：
两个DIV重合：
接下来再执行缩放：
.matrix_box1 { width:200px; height:200px; background-color:#a0b3d6; transform: matrix(0.5, 0, 0, 0.5, 30, 30);position:absolute;top:0;left:0}
效果如图：
从现象中可以看出matrix_box1在原来的基础上的中心点进行缩放了。
所以，transform: matrix平移的时候是以元素左上角作为参考坐标的，所放的时候是以元素中心点为参考坐标的。
由此，我们可以推导出缩放之后元素的top跟left即元素的X\Y坐标公式：
left=x1-(w1-w2)/2;
top=y1-(h1-h2)/2;
w1：缩放前元素宽度；
h1：缩放前元素高度；
w2：元素经matrix缩放后的宽度；
h2：元素经matrix缩放后的高度；
x1：缩放前元素的X坐标；
y1：缩放前元素的Y坐标；
left：元素经matrix平移后的X坐标；
top：元素经matrix平移后的Y坐标；
此处说明一下，如果不缩放的话，根据transform: matrix是能够求出元素平移后的坐标的，ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置（具体信息自行百度）。但是涉及到缩放就不管用了。加入起始坐标是0,0，平移值是30,30，也就是说不管缩放值是多少，通过公式得出的值都是30,30。这跟最终效果是不符的。所以得用以上公式再进一步推导。
未经允许不得转载：前端撸码笔记 » 关于transform：Matrix()偏移缩放后的坐标问题