Javascript встроенный стиль преобразования поворота на основе другого CSS стилизованного элемента

Question

У меня есть элемент red. который имеет CSS стилей. Теперь я хочу стилизовать другой элемент black на основе стиля CSS из red.

Итак, я получил getBoundingClientRect() элемента red и применил его к black. При нормальных обстоятельствах я ожидал бы, что это сработает. Но красные и синие повернутые элементы не совпадают.

Я не знаю, почему и как это исправить ...

(() => {
  const re = document.querySelector('.red');
  let {
    bottom,
    height,
    left,
    right,
    top,
    width,
    x,
    y
  } = re.getBoundingClientRect();

  const target = document.querySelector('.black');
  target.style.bottom = `${bottom}px`;
  target.style.left = `${left}px`;
  target.style.right = `${right}px`;
  target.style.top = `${top}px`;
  target.style.x = `${x}px`;
  target.style.y = `${y}px`;
  target.style.transform = `rotate(45deg)`;
   target.style['transform-origin'] = `-150px -100px`

})();

.parent {
  width: 600px;
  height: 600px;
  position: relative;
  border: 1px solid red;
  margin: auto;
}

.element {
  width: 100px;
  height: 40px;
  background: red;
  position: absolute;
  left: 250px;
  top: 30px;
}


.red {
  transform: rotate(45deg);
  transform-origin: -150px -100px;
}

.black {
  background: black;
}

.blue {
  background: blue;
}

.center {
  border-radius: 200%;
  background: black;
  width: 4px;
  height: 4px;
  position: absolute;
  left: 302px;
  top: 302px;
}

body {
  position: relative;
}

<div class='parent'>
  <div class='center'></div>
  <div class='element'></div>
  <div class='element red'></div>
  <div class='element black'></div>
</div>