Как центрировать transform: scale при position: absolute?

Делаю hover на блок который позиционирован абсолютно, с transform: scale.
Но он почему то уезжает вбок, не пойму как выравнять это дело, чтоб четко по центру увеличивался.
Пробовал через matrix, но это костыль, должно быть какое то правильное решение.
Вот накидал Пример
  • Вопрос задан
  • 503 просмотра
Решения вопроса 1
JRK_DV
@JRK_DV
Рецепты https://codepen.io/jrkdv/full/LKLXdq
вы при ховере переопределяете transform
&:hover {
  transform: translate(-50%, -50%) scale(1.5);
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
HunteR-VRX
@HunteR-VRX
Помешанный на развитии
Судя по запросу, вам необходимо выполнять масштабирование некого блока при наведении курсора (псевдокласс :hover)

За само масштабирование в ту или иную сторону
отвечает функция scale() свойства transform, при этом совсем не играет роли в нормальном ли потоке находится ваш масштабируемый блок (position: static;) или же как у вас - position: absolute;
По умолчанию точка привязки scale - центр элемента, а вы заметьте сами прописываете вашему элементу еще и translate, который создан для сдвига в ту или иную сторону по координатам осей X и Y, именно поэтому масштабирование у вас и происходит с одновоеменным движением элемента.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы