How to rotate point and place in the center?

Question

I have tried to rotate point in case when parent container was rotated:

https://stackblitz.com/edit/js-qzfdbb?file=index.js

Code is:

var elParent = document.getElementById('parent');
var elCircle = document.getElementById('circle');

elCircle.addEventListener('click', function(e) {
  const circleSvg = document.getElementById('circle');
  const circleSvgRect = circleSvg.getBoundingClientRect();
  const parentRect = document.getElementById('parent').getBoundingClientRect();

  let leftTopX = circleSvgRect.left - parentRect.left;
  let leftTopY = circleSvgRect.top - parentRect.top;

  leftTopX = leftTopX + 15 - 5;
  leftTopY = leftTopY + 15 - 5;

  var degree = (20 * Math.PI) / 180;
  var xc = 250;
  var yc = 250;

  leftTopX =
    (leftTopX - xc) * Math.cos(degree) -
    (leftTopY - yc) * Math.sin(degree) +
    xc;
  leftTopY =
    (leftTopX - xc) * Math.sin(degree) +
    (leftTopY - yc) * Math.cos(degree) +
    yc;

  let c = document.getElementById('c');
  if (c) c.remove();

  c = document.createElement('div');
  c.setAttribute('id', 'c');
  c.style.setProperty('left', leftTopX + 'px');
  c.style.setProperty('top', leftTopY + 'px');
  elParent.appendChild(c);
});

To see result make click inside red circle. Withour rotation a green circle is placed in the center of red circle. Otherwise has offset.

Answer 1

the maths should be something like this, but the solution needs some additional calculations for the rotation of the red circle itself within the outer rectangle.

Note 1: The margin of the body is removed for simplicity...
Note 2: Scrolls effect the script a lot. Therefore the solution also may not be very useful without taking it into consideration...

var elParent = document.getElementById('parent');
var elCircle = document.getElementById('circle');

elCircle.addEventListener('click', function(e) {
  const circleSvg = document.getElementById('circle');
  const circleSvgRect = circleSvg.getBoundingClientRect();
  const parentRect = document.getElementById('parent').getBoundingClientRect();

  const degree = getCurrentRotation(document.getElementById('parent'));

  const xcenter = parentRect.width / 2 + parentRect.left;
  const ycenter = parentRect.height / 2 + parentRect.top;

  const dx = (circleSvgRect.left + 10) - xcenter;
  const dy = ycenter - (circleSvgRect.top + 10); 

  console.log(dx + ' - ' + dy + '-' + Math.atan(dy / dx));

  const r = Math.sqrt(dx * dx + dy * dy);
  const curDegree = Math.atan(dy / dx) + degree;

  xnew = xcenter + Math.sign(-dx) * Math.sin(curDegree) * r;
  ynew = ycenter - Math.sign(-dx) * Math.cos(curDegree) * r;

  let c = document.getElementById('c');
  if (c) c.remove();

  c = document.createElement('div');
  c.setAttribute('id', 'c');
  c.style.setProperty('left', xnew + 'px');
  c.style.setProperty('top', ynew + 'px');
  elParent.appendChild(c);
});

//https://stackoverflow.com/questions/19574171/how-to-get-css-transform-rotation-value-in-degrees-with-javascript
function getCurrentRotation(el) {
  var st = window.getComputedStyle(el, null);
  var tm =
    st.getPropertyValue('-webkit-transform') ||
    st.getPropertyValue('-moz-transform') ||
    st.getPropertyValue('-ms-transform') ||
    st.getPropertyValue('-o-transform') ||
    st.getPropertyValue('transform') ||
    'none';
  if (tm != 'none') {
    var values = tm
      .split('(')[1]
      .split(')')[0]
      .split(',');
    return (angle = Math.atan2(values[1], values[0]));
  }
  return 0;
}

<div id="parent">
  <div id="circle" style="left: 100px; top: 100px"></div>
</div>

<style>
  body {
    margin:0px;
    padding:0px;
  }
  #circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: red;
    position: relative;
    
  }

  #c {
    position: absolute;
    width: 10px;
    height: 10px;
    background: green;
    border-radius: 50%;
  }

  #parent {
    width: 500px;
    position: relative;
    height: 500px;
    border: 1px solid #ccc;
    transform: rotate(180deg);
  }
</style>