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

Question

[Дмитрий Карпов]

Делаю hover на блок который позиционирован абсолютно, с transform: scale.
Но он почему то уезжает вбок, не пойму как выравнять это дело, чтоб четко по центру увеличивался.
Пробовал через matrix, но это костыль, должно быть какое то правильное решение.
Вот накидал Пример

Answer 1

[ⓒⓢⓢ]

вы при ховере переопределяете transform

&:hover {
  transform: translate(-50%, -50%) scale(1.5);
}

Comments

[Дмитрий Карпов]

А я пробовал так
&:hover {
transform: translate(-50%, -50%);
transform: scale(1.5);
}
А он получается перебивает, надо в одну строку писать.
Спасибо.

Answer 2

[ReActor Дмитрий Вершанский]

Судя по запросу, вам необходимо выполнять масштабирование некого блока при наведении курсора (псевдокласс :hover)

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