Get divs position after translate3d

Question

In Javascript, when I move an element using the gpu via the translate3d method, the elements style-left position doesnt change at all. As the cpu isnt even aware any motion has

Answer 1

Use Element.getBoundingClientRect() to get the element coordinates

Here's just a small example that retrieves the .left Rect property from a CSS3 translated (animated) element:

const box = document.getElementById('box');
const printer = document.getElementById('printer');
const printBoxRectLeft = () => {
  printer.textContent = box.getBoundingClientRect().left;
  requestAnimationFrame(printBoxRectLeft);
};

printBoxRectLeft();

#box{
  width:30px; height:30px; background:red;
  animation: animX 3s infinite alternate;
}
@keyframes animX { to{ transform:translateX(300px); }}