Задать вопрос
@konstantinst13

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

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

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

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

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

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

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

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

Благодарю за внимание
  • Вопрос задан
  • 83 просмотра
Подписаться 1 Простой 2 комментария
Пригласить эксперта
Ответы на вопрос 1
RAX7
@RAX7
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы