Question

使用CSS3 -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属性只会返回最终的平移坐标。可以预期的是它所设定的内容。

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

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

1 个答案: