Transform-origin не работает и анимация работает неправильно. Что делать?

Question

[konstantinst13]

Доброго времени суток!

Я написал скрипт, который увеличивает картинки если навести на них курсор (или на должность, соответствующую этому человеку). Если убрать курсор с картинки/должности, картинка возвращается обратно в предыдущую ширину и высоту. При этом при увеличении проявляется вторая картинка. При убирании курсора/пальца с картинки/фотки opacity картинки для ховера становится обратно в 0.

Я бы и сам рад обрезать эти картинки по нужной форме в фотошопе и не парится со всякими масками. Только мне нужно сделать так, чтобы форма вращалась, а фото стояло на месте. Вот как на этом сайте: https://contra.com/

Картинки обрезаны тэгами mask в которых в каждом свой тэг path со своим значением. Я написал в anims.css анимацию вращения, чтобы каждый из этих path крутился. Но почему-то ромбы и многоконечные звёзды крутятся правильно (опорная точка находится посередине родительского дива и посередине самого path), а прямоугольники крутятся неправильно (в центре родительского дива находится угол прямоугольника).

Анимация неправильно ведёт себя на смм-специалисте, на аналитике и на дизайнере.

Всё что знал перепробовал, ничего не помогает. Не знаю что делать...

Вот ссылка на сайт: https://konstantinstepanyan.github.io/test/
Вот ссылка на репозиторий на гитхабе: https://github.com/konstantinstepanyan/test

Благодарю за внимание

Comments

[ZB Venom]

А почему на двух вы делаете rect, а на остальных квадратах path

[konstantinst13]

ZB Venom, потому что rect это ромб (он целый), а path это прямоугольник в угле которого вырезан другой прямоугольник.
Я пытался использовать для этой фигуры два rect, один с fill="#fff", другой с "#000", но случается следующий баг:
Я навожу курсор на картинку и в момент анимации появляется фото. А когда анимация заканчивается, фото снова исчезает в нужной части.
Я пришёл к выводу, что в момент анимации rect с fill="#000" почему-то перестает работать...
Вот я сейчас добавил таким путем вырезанный квадратик на менеджера проекта в репозиторий на гитхабе. (если отображается старая версия, то нужно очистить кэш в браузере)

Answer 1

[RAX7]

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