CSS преобразование матрицы изображения не сохраняя ту же позицию

Question

Пожалуйста, простите меня, если я не делаю это понятно, однако я попробую свой уровень лучше всего, чтобы получить вещи ясно

Я пытаюсь перевернуть изображение, так как это веб-приложение я выбираю CSS матрицы преобразования для выполнения этой листать и попытался следующий фрагмент кода, и это делает работу, но есть проблемы в позиционировании

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

Перед Флип

После Флип

Doing так не сохраняя ту же позицию, как вы видите на картинке. Правильно ли я это делаю?

Обновленный Вопрос

В первом флип это работать, как Вы предложили, но он отличается от последующих перестроек. Я применил тот же MX = Left + Width/2 для всех флипов.

После первого Флип

После Второй Флип

Answer 1

Ваша матрица преобразования для зеркального отображения относительно вертикальной линии Х = 0, так что координаты становятся отрицательными.

Я думаю, что вам нужно, чтобы отразить изображение относительно средней линии MX = Left + Width/2, так что ваша матрица должна выглядеть matrix(-1, 0, 0, 1, 2 * MX, 0)