css变换矩阵图像不保留相同的位置答案

【问题标题】：css transform matrix image not retaining same positioncss变换矩阵图像不保留相同的位置
【发布时间】：2017-01-15 22:30:47
【问题描述】：

如果我没有说清楚，请原谅，但我会尽力把事情说清楚

我正在尝试翻转图像，因为它是 Web 应用程序，所以我选择 css 变换矩阵来执行此翻转并尝试了以下 sn-p 并且它可以工作但定位有问题

svgCanvas.changeSelectedAttribute("transform","matrix(-1, 0, 0, 1, 0, 0)");   // Consider svgCanvas as element

翻转前

翻转后

这样做不会保留您在图像中看到的相同位置。我做得对吗？

更新问题

在第一次翻转中，它按照您的建议工作，但与下一次翻转不同。我对所有翻转都应用了相同的MX = Left + Width/2。

第一次翻转后

第二次翻转后

【问题讨论】：

【解决方案1】：

您的变换矩阵用于镜像垂直线 X = 0，因此坐标变为负数。

我认为你需要镜像中间线MX = Left + Width/2，所以你的矩阵应该看起来像matrix(-1, 0, 0, 1, 2 * MX, 0)

【讨论】：