Css转型转型

Question

我有一个简单的情况，我用这段代码创建了一个SVG多边形：

<svg height="500" width="500">
  <g>
    <polygon points="200,100 400,150 200,200"/>   
  </g>
</svg>

我已经用它来应用了两个转换：

g {
  transform: matrix(1, 0, 0, 1, 100, 150);
  transition: all 1s ease;
}

.move {
   fill: red;
   transform: matrix(-1, 0, 0, 1, 400, 150)
}

然后我应用并移除.move类，我在这两个状态之间得到了一个非常难看的过渡，正如你在这支笔中看到的那样：

https://codepen.io/anon/pen/qpaMvo

问题

我们可以从原始多边形的边界框设置动画到最终多边形的边界框。我知道我可以修改我定义多边形坐标的方式，但你可以想象;我需要用这种方式定义它们。