当使用translate3d（x，y，z）移动元素时，是否可以找到元素的当前（x，y，z）？

Question

使用CSS3s -webkit-transform: translate3d(x,y,z);是否有可能跟踪（x，y，z）移动，因为它随javascript移动？

示例： 对象从（0,0,0）开始，我们在4秒的持续时间内将它翻译为（4,4,0）。

理论上，在第一秒时元素应该放在（1,1,0），而在第二秒时元素应该在（2,2,0）等等。有没有办法使用Javascript来跟踪对象？

检索translate3d（x，y，z）的css属性将返回最终的平移坐标。这是预料之中的事情。

Answer 1

如果您通过CSS转换移动元素，然后否，则无法添加元素。只有transitionstart和transitionend有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