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

const appendBlueToGreen = () => {
   // Get the elements
   const blueElement = document.getElementById('blue');
   const greenElement = document.getElementById('green');
   const redElement = document.getElementById('red');

   // Function to convert degree to radian
   const radToDeg = (deg) => (deg * 180) / Math.PI;

   // get the rotation center
   const getCenter = element => {
      try{
         const [x, y] = window.getComputedStyle(element).transformOrigin.split(' ').map(parseFloat);
         return {x, y};
      }
      catch(err){
         // default is element center
         return {x: element.offsetWidth / 2, y: element.offsetHeight / 2};
      }
   }

   // Function to get the rotation angle of an element (in radians)
   const getRotation = (element) => {
      const transform = window.getComputedStyle(element).transform;
      const matrix = transform.match(/^matrix\((.+)\)$/);
      if (matrix) {
         const values = matrix[1].split(', ');
         const a = values[0];
         const b = values[1];
         return Math.atan2(b, a);
      } else {
         return 0;
      }
   };

   const getOffset = (element) => {
      //return {x: parseFloat(window.getComputedStyle(element).left),
      //   y: parseFloat(window.getComputedStyle(element).top)};
      return {x: element.offsetLeft, y: element.offsetTop};
   }

   const rotateVec = ({x, y}, theta) => { // rotate vector {x, y} by theta clockwise
      const cosTheta = Math.cos(theta),
         sinTheta = Math.sin(theta);
      return {x: x * cosTheta + y * sinTheta, y: -x * sinTheta + y * cosTheta};
   };

   const addVec = ({x: x1, y: y1}, {x: x2, y: y2}, ...rest) => {
      const sum12 = {x: x1 + x2, y: y1 + y2};
      return rest.length === 0 ? sum12 : addVec(sum12, ...rest);
   }

   const negVec = ({x, y}) => ({x: -x, y: -y});

   const roundToFixed = (x, digits) => x.toFixed(digits).replace(/\.?0+$/, '');

   // Calculate the rotations
   const redRotation = getRotation(redElement);
   const greenRotation = getRotation(greenElement);
   const blueRotation = getRotation(blueElement);

   // calculate the offset positions of elements wrt their parents
   const redOffset = getOffset(redElement);
   const greenOffset = getOffset(greenElement);
   const blueOffset = getOffset(blueElement);

   // calculate the centers
   const redCenter = getCenter(redElement);
   const greenCenter = getCenter(greenElement);
   const blueCenter = getCenter(blueElement);

   let newOffset = addVec(negVec(greenOffset), negVec(greenCenter), redCenter);
   newOffset = rotateVec(newOffset, -redRotation);
   newOffset = addVec(newOffset, blueOffset, blueCenter, negVec(redOffset), negVec(redCenter));
   newOffset = rotateVec(newOffset, greenRotation + redRotation);
   newOffset = addVec(newOffset, greenCenter, negVec(blueCenter));

   // Set the new position and rotation for the blue element
   blueElement.style.position = 'absolute';
   blueElement.style.left = `${roundToFixed(newOffset.x, 2)}px`;
   blueElement.style.top = `${roundToFixed(newOffset.y, 2)}px`;


   const newBlueRotation = roundToFixed(radToDeg(blueRotation - redRotation - greenRotation), 2);
   blueElement.style.transform = `rotate(${newBlueRotation}deg)`;

   // Append the blue element to the green element
   greenElement.appendChild(blueElement);

   console.info(blueElement.style.left, blueElement.style.top, blueElement.style.transform)

   this.event.target.setAttribute("disabled","d");
};

window.appendBlueToGreen = appendBlueToGreen;

<button onclick = {appendBlueToGreen()}>Append To Green</button>
<div id = "red" style = "transform: rotate(20deg);width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;background-color: red;">
    <div id = "green" style = "transform: rotate(20deg);width: 80px;height: 80px;position: absolute;top: 13px;left: 11px;background-color: green;">
    </div>
</div>
<div id = "blue" style = "transform: rotate(45deg);width: 50px;height: 50px;position: absolute;top: 29px;left: 313px;background-color: blue;"></div>