Javascript inline rotate transformation style based on another CSS styled element

Question

I have an element red. which has CSS styles. Now I want to style another element black based on the CSS style of red.

So what I've done is get the getBoundingClientRect()of the element red and apply it to black. I would under normal circumstances expect this to work. But red and blue rotated elements doesn't line up.

I am not sure why and how to fix this...

(() => {
  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>