Изначальное размещение элементов:
Размещение после применения transform: scale
Как можно заметить, элементы сместились. Как этого не допустить? Как изменить размеры элементов, не изменяя их расположение?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуИзначальное размещение элементов:
Размещение после применения transform: scale
Как можно заметить, элементы сместились. Как этого не допустить? Как изменить размеры элементов, не изменяя их расположение?
Можно указать точку трансформации: transform-origin
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.block {
display: block;
max-width: 300px;
cursor: pointer;
}
.block__content {
background-color: red;
transition: transform 0.2s linear;
transform-origin: left top;
}
.block:hover .block__content {
transform: scale(0.3);
}
<div class="block">
<div class="block__content">
Контент Контент Контент Контент Контент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент КонтентКонтент
КонтентКонтент КонтентКонтент КонтентКонтент Контент
</div>
</div>