理由は簡単です。JavaScript または CSS を使用して CSS 変換を設定すると、それを取得しようとするとマトリックス変換が返されます。つまり、次のような簡単なことをするとします...
element.style.webkitTransform = "translate3d(10px,0,0)";
var transform = element.style.webkitTransform;
transform
ありませんtranslate3d(10px,0,0)
、そうなりますmatrix3d(10px,0,0,[...])
。これらの値を取得するには、次のようなマトリックスを解析する必要があります...
element.style.webkitTransform = "translate3d(10px,0,0)";
var matrix = new WebKitCSSMatrix(element.style.webkitTransform); //get the matrix
var x = matrix.m41 //get the value of x in the matrix
x += 1500 //modify x
element.style.webkitTransform = matrix.toString //Apply the new transformation
これは、data-attr を使用した同じコードです。
element.style.webkitTransform = "translate3d(10px,0,0)";
x = element.dataset.x
element.style.webkitTransform = "translate3d(" + x + ",0,0)"
ここで 3D CSS マトリックスをいじることができます。
http://jsfiddle.net/F8xLv/