Is it possible to find the current (x, y, z) element when moving it using translate3d (x, y, z)?

Question

With CSS3s, is -webkit-transform: translate3d(x,y,z);it possible to track the movement (x, y, z) when moving using javascript?

Example: An object starts with (0,0,0), and we translate it to (4,4,0) within 4 seconds.

Theoretically, in the first second the element should be placed in (1,1,0), and in the second second the element should be in (2,2,0), etc. Is there a way for Javascript to track an object?

Retrieving the css property of translate3d (x, y, z) will simply return the final coordinates of the translation. What to expect since it is installed.

Answer 1

CSS, , . eventlisteners .

javascript, , x, y, z :

node = document.getElementById("yourid");

//your animation loop
  console.log(window.getComputedStyle(node).webkitTransform); //this will return a string
  var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
  console.log(curTransfrom); //this will return an object
//end animation loop