Не удается выровнять блок по x, scale и translate

Question

position: absolute;
top: 0;
left: 200px;
transform: scale(1.7829131652661065) translate(-50%, -100%);
height: 57px;
width: 102px;

.gl {
   width: 500px;
   background:blue;
   aspect-ratio: 1;
   position: relative;
}
.ff {
  width: 200px;
  height: 5px;
  background:green;
  position: absolute;
  top: 0;
  left:0;
}
.bl {
  position: absolute;
  top: 0;
  left: 200px;
  background:red;
  transform: scale(2) translate(-50%, 20px);
  height: 57px;
  width: 102px;
}

<div class='gl'>
   <div class='ff'></div>
   <div class='bl'></div>
</div>

У одного меня криво работает? Сперва необходимо масштабировать блок. Затем выровнять его по x. Без маштаба, ровно, кажется он не учитывает маштаб...

Answer 1

Необходимо помнить, что позиционирование происходит относительно верхнего левого угла элемента. Трансформации же производятся относительно центра (если это не изменено с помощью transform-origin) элемента и исходя из его размеров.

Повторюсь, порядок трансформаций в свойстве transform имеет значение.

.gl {
  position: relative;
  width: 500px;
  aspect-ratio: 1;
  background: blue;
}

.ff {
  position: absolute;
  top: 0; left: 0;
  height: 5px; width: 200px;
  background: green;
}

.bl {
  position: absolute;
  top: 0; left: 200px;
  height: 30px; width: 102px;
  transform: scale(2) translate(-50%, 20px);
  background: red;
}
.bl2 {
  position: absolute;
  top: 0; left: 200px;
  height: 30px; width: 102px;
  transform: translate(-50%, 20px) scale(2);
  background: #fc08;
}

<div class='gl'>
  <div class='ff'></div>
  <div class='bl'>bl</div>
  <div class='bl2'>bl2</div>
</div>

БЛОГ НА HUSL

Не удается выровнять блок по x, scale и translate

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