Attempting to animate a matrix3d with both rotation and translation concurrently has yielded unexpected results for me. It seems that changing the order of applying rotation and translation produces vastly different outcomes.
http://jsfiddle.net/wetlip/2nuQu/ - rotate before translation
http://jsfiddle.net/wetlip/Z3MTX/ - translation before rotate
var el = document.getElementById("aa2");
var matrix = new MSCSSMatrix(el.style.transform);
matrix = matrix.rotateAxisAngle(0, 1, 0, 85);
matrix = matrix.translate(300, 0, 0);
el.style.transform = matrix;
The above code snippet gives significantly different output compared to:
var el = document.getElementById("aa2");
var matrix = new MSCSSMatrix(el.style.transform);
matrix = matrix.translate(300, 0, 0);
matrix = matrix.rotateAxisAngle(0, 1, 0, 85);
el.style.transform = matrix;