Почему transform: translate перестает работать?
У меня есть блок, который я передвигаю на 50% от ширины и высоты самого блока по x, y с помощью transform: translate. Все работает, но когда я прописываю этому же блоку transform: scale этот блок меняет свое расположение и передвигается в верхний левый угол. Что происходит? Почему свойство transform: translate перестает работать?
.block {
width: 200px;
height: 200px;
background: pink;
transform: translate(50%, 50%);
transform: scale(1);
}<div class="block">Hello!</div>Ответы (1 шт):
Автор решения: Михаил Камахин
→ Ссылка
Если вы хотите использовать translate и scale в transform, пишите так:
.block {
width: 100px;
height: 100px;
background: pink;
transform: translate(50%, 50%) scale(1.5);
}<div class="block">Hello!</div>