Заставить элемент появиться в точном месте другого, используя преобразования

Question

У меня есть элемент, который я хочу отобразить в другом месте. Этот другой элемент преобразуется в своем масштабе и вращении. Первый элемент должен предполагать появление другого, используя только преобразования.

const getRotation = el => {
  const st = window.getComputedStyle(el, null);
  const tr = st.getPropertyValue('transform');

  const values = tr.split('(')[1].split(')')[0].split(',');
  const a = values[0];
  const b = values[1];

  const angle = Math.round(Math.atan2(b, a) * (180/Math.PI));

  return angle;
}

const firstPhoto = document.querySelector('.first');
const secondPhoto = document.querySelector('.second');

const firstPhotoBox = firstPhoto.getBoundingClientRect();
const secondPhotoBox = secondPhoto.getBoundingClientRect();

const deltaX = secondPhotoBox.left - firstPhotoBox.left;
const deltaY = secondPhotoBox.top - firstPhotoBox.top;
const deltaW = secondPhotoBox.width / firstPhotoBox.width;
const deltaH = secondPhotoBox.height / firstPhotoBox.height;
const deltaR = getRotation(secondPhoto);

firstPhoto.style.transform = `translate(${deltaX}px, ${deltaY}px) scaleX(${deltaW}) scaleY(${deltaH}) rotateZ(${deltaR}deg)`;

div {
  opacity: 0.8;
}

.first {
  width: 200px;
  height: 100px;
  background: green;
}

.second {
  width: 260px;
  height: 400px;
  background: orange;
  transform: translate(20%, 5%) scale(0.8) rotateZ(-2deg);
}

<div class="first">Element 1</div>
<div class="second">Element 2</div>