是否可以使用 translate3d(x,y,z) 找到元素移动时的当前 (x,y,z)？答案

【问题标题】：Is it possible to find the current (x,y,z) of an element as it moves using translate3d(x,y,z)?是否可以使用 translate3d(x,y,z) 找到元素移动时的当前 (x,y,z)？
【发布时间】：2011-06-05 11:01:15
【问题描述】：

使用 CSS3s -webkit-transform: translate3d(x,y,z); 是否可以在使用 javascript 移动时跟踪 (x,y,z) 移动？

示例：一个对象从 (0,0,0) 开始，我们在 4 秒内将其转换为 (4,4,0)。

理论上，在第一秒，元素应该放在 (1,1,0)，而在第二秒，元素应该放在 (2,2,0)，等等。有没有 Javascript 的方法跟踪对象？

检索 translate3d(x,y,z) 的 css 属性只会返回最终的平移坐标。这是预期的，因为它是设置的。

【问题讨论】：

标签： javascript webkit css trace translate

【解决方案1】：

如果您通过 CSS 过渡来移动元素，那么不，没有办法添加元素。只有 transitionstart 和 transitionend 的事件监听器。

如果您是通过 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

【讨论】：

非 webkit 浏览器呢？