Is it possible to find the current (x,y,z) of an element as it moves using translate3d(x,y,z)?

Question

Using CSS3s -webkit-transform: translate3d(x,y,z); is it possible to trace the (x,y,z) movement as it moves with javascript?

Example: An object begins at (0,0,0) and we translate it to (4,4,0) over a 4sec duration.

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

Retrieving the css property of translate3d(x,y,z) will just return the final translation coordinates. Which is to be expected as that what it is set to.

Answer 1

If you are moving the element through CSS transitions then no, there is no way to tack the element. There are eventlisteners for transitionstart and transitionend only.

If you are animating through javascript then yes, you can trace x,y,z through:

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