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

Question

Вот пример кода:

#wrapper {
  display: flex;
  width: 200px;
  
}

#first-child {
  width: 200px;
  height: 200px;
  background: yellow;
  transform: scale(0.5);
  transform-origin: left top;
}

#second-child {
  width: 200px;
  height: 200px;
  background: red;
  transform: scale(0.5);
  transform-origin: left top;
}

<div id="wrapper">
  <div id="first-child"></div>
  <div id="second-child"></div>
</div>

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

Answer 1

UPD:

Тогда можно использовать относительное позиционирование для красного блока и придвинуть его к жёлтому:

#wrapper {
  display: flex;
  width: 200px;
}
#first-child {
  width: 200px;
  height: 200px;
  background: yellow;
  transform: scale(0.5);
  transform-origin: left top;
}
#second-child {
  width: 200px;
  height: 200px;
  background: red;
  transform: scale(0.5);
  transform-origin: left top;
  position: relative;
  right: 50px;
}

<div id="wrapper">
  <div id="first-child"></div>
  <div id="second-child"></div>
</div>

Не очень понятно, что Вы подразумеваете под "отступами". Вы хотите, чтоб они примыкали друг к другу? Тогда просто измените для жёлтого блока свойство transform-origin:

#wrapper {
  display: flex;
  width: 200px;
}
#first-child {
  width: 200px;
  height: 200px;
  background: yellow;
  transform: scale(0.5);
  transform-origin: right top;
}
#second-child {
  width: 200px;
  height: 200px;
  background: red;
  transform: scale(0.5);
  transform-origin: left top;
}

<div id="wrapper">
  <div id="first-child"></div>
  <div id="second-child"></div>
</div>

БЛОГ НА HUSL

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

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