Не удается разобраться с поведением блока

Question

setTimeout(_ => {
    bl2.setAttribute('style', `transform: translateX(-50%) scale(2) translateY(100%);`);
}, 1000);

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

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


.bl2 {
  position: absolute;
  bottom: 0; left: 200px;
  height: 50px; width: 50px;
  background: #fc08;
  transform: translateX(-50%) translateY(100%);
}
* {
    position: relative;
}

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

Не удается разобраться с поведением блока. Изначально все ровно, все как надо. Но если масштабировать блок. То по оси X все хорошо, по Y все плохо. С этой последовательностью, кажется это не решаемо...

Почему он смещает по Y так, будто на 150% выставлено вместо 100%

Answer 1

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

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

^{https://ru.stackoverflow.com/a/1595982/265406}

setTimeout(_ => {
  bl2.setAttribute('style', `transform: translateX(-50%) translateY(100%) scale(2); transform-origin: 50% 0%;`);
}, 1000);

* {
  position: relative;
}

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

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

.bl2 {
  position: absolute;
  bottom: 0;
  left: 200px;
  height: 50px;
  width: 50px;
  background: #fc08;
  transform: translateX(-50%) translateY(100%);
}

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

БЛОГ НА HUSL

Не удается разобраться с поведением блока

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