how to flip an image vertically at its position using css with smooth transition?

Question

I have to flip my image vertically (ie is rotateX ) with smooth transition after few minutes at its center position. My image ois flipping but the problem is that its not fliiping on its position. Its flipping from the points somewhere above the image. I need to flip it with its center. I have tried all the rotating coordinates but its not working. Please help me

Here is my JsFiddle. you can find my codes here.

https://jsfiddle.net/bh7x7weg/

Thanks !!!!

Answer 1

Your images origin needs to be set to transform-origin: center center; Read here for more information about this style.

https://jsfiddle.net/bh7x7weg/3/