要素がtranslate3d（x、y、z）を使って移動するときに、現在の（x、y、z）を見つけることは可能ですか？

Question

CSS3を使用する-webkit-transform: translate3d(x,y,z); javascriptで動く（x、y、z）動きをトレースすることは可能ですか？

例： オブジェクトは（0,0,0）から始まり、4秒間に（4,0,0）に変換されます。

理論的には、最初の秒で要素は（1,1,0）に配置し、2番目の秒で要素は（2,2,0）などにする必要があります。オブジェクトを追跡するJavascript？

translate3d（x、y、z）のcssプロパティを取得すると、最終的な変換座標が返されます。それはそれが設定されているものとして期待されるものです。

Answer 1

要素をCSSトランジションで移動する場合は、noをタックする方法はありません。移行開始と移行期のみのイベントリスナーがあります。

あなたは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