CODEWITHSUNDEEP
javascriptcssmathmatrixtransform
Prabhakaran
Prabhakaran

Reputation: 4013

css transform matrix image not retaining same position

Please excuse me if I am not making it clear, however I will try my level best to get things clear

I am trying to flip the image, since it is web application I choose css transform matrix to perform this flipping and tried the following snippet and it does the work but have issue in positioning

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

Before Flip

enter image description here

After Flip

enter image description here

Doing so is not retaining the same position as you see in the image. Am I doing it right?

Updated Question

In the first flip it work as you suggested but it differs from the next flips. I have applied same MX = Left + Width/2 for all flips.

After First Flip

enter image description here

After Second Flip

enter image description here

Upvotes: 2

Views: 319

Answers (1)

MBo
MBo

Reputation: 80187

Your transformation matrix is for mirroring about vertical line X = 0, so coordinates become negative.

I think you need to mirror image about middle line MX = Left + Width/2, so your matrix should look like matrix(-1, 0, 0, 1, 2 * MX, 0)

Upvotes: 2

Related Questions