Как сделать так, чтобы элементы при использовании transform: scale прижималась к верхнему левому краю?

Question

Изначальное размещение элементов:

Размещение после применения transform: scale

Как можно заметить, элементы сместились. Как этого не допустить? Как изменить размеры элементов, не изменяя их расположение?

Answer 1

Можно указать точку трансформации: 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>

БЛОГ НА HUSL

Как сделать так, чтобы элементы при использовании transform: scale прижималась к верхнему левому краю?

Ответы (1 шт):