translate A to B

by Richard Hunter

HTML

<div id="foo">

</div>
<div id="bar">

</div>

CSS

#foo {
  width: 100px;
  height: 100px;
  background: red;
  transform-origin: center;
}

#bar {
  position: fixed;
  left: 0;
  right: 0;
  top: 10px;
  height: 150px;
  background: yellow;
  opacity: 0.7;
}

JavaScript

function atob(a, b) {
  let fbb = a.getBoundingClientRect();
  let bbb = b.getBoundingClientRect();
  let scaleWidth = bbb.width / fbb.width;
  let scaleHeight = bbb.height / fbb.height;
  let x = 0;
  let y = 0;

  x = getXMidpoint(bbb) - getXMidpoint(fbb);
  y = getYMidpoint(bbb) - getYMidpoint(fbb);

  foo.style.transform = `translate(${x}px, ${y}px) scale(${scaleWidth}, ${scaleHeight})`;

  function getXMidpoint(bb) {
    return ((bb.x + bb.width) + bb.x) / 2;
  }

  function getYMidpoint(bb) {
    return ((bb.y + bb.height) + bb.y) / 2;
  }
}
atob(foo, bar);