transform-origin doesn't work and the animation doesn't work correctly. What to do?

Question

css

Good day!

I wrote a script that zooms in on pictures if you hover over them (or the position corresponding to that person). If you remove the cursor from the picture / position, the picture returns back to the previous width and height. In this case, when zoomed in, the second picture appears. When you remove the cursor / finger from the picture / photo, the opacity of the hover picture becomes back to 0.

I myself would be happy to crop these pictures to the desired shape in Photoshop and do not bathe with all sorts of masks. Only I need to make the form rotate and the photo stand still. Here's how on this site: https://contra.com/

Pictures are cropped by mask tags, each with its own path tag with its own value. I wrote a rotation animation in anims.css to make each of these paths rotate. But for some reason, rhombuses and multi-pointed stars rotate correctly (the anchor point is in the middle of the parent div and in the middle of the path itself), but the rectangles rotate incorrectly (the corner of the rectangle is in the center of the parent div).

Animation behaves incorrectly on the SMM specialist, on the analyst and on the designer.

I've tried everything I know, nothing helps. I don't know what to do...

Here is a link to the site: https://konstantinstepanyan.github.io/test/
Here is a link to the repository on github: https://github.com/konstantinstepanyan/test

Thank you for your attention

Answer 1

https://css-live.ru/articles/transformacii-dlya-sv...