symdesign
11/28/2015 - 8:29 PM

Decompose matrices

function extract(matrix) { // supports only scale*rotate*translate matrix
    var radians = Math.PI / 180

    var sX = Math.sqrt(m[0]*m[0] + m[1]*m[1] + m[2]*m[2]),
        sY = Math.sqrt(m[4]*m[4] + m[5]*m[5] + m[6]*m[6]),
        sZ = Math.sqrt(m[8]*m[8] + m[9]*m[9] + m[10]*m[10])

    var rX = Math.atan2(-m[9]/sZ, m[10]/sZ) / radians,
        rY = Math.asin(m[8]/sZ) / radians,
        rZ = Math.atan2(-m[4]/sY, m[0]/sX) / radians

    if (m[4] === 1 || m[4] === -1) {
      rX = 0
      rY = m[4] * -Math.PI/2
      rZ = m[4] * Math.atan2(m[6]/sY, m[5]/sY) / radians
    }

    var tX = m[12]/sX,
        tY = m[13]/sX,
        tZ = m[14]/sX

    return {
      translate: [tX, tY, tZ],
      rotate: [rX, rY, rZ],
      scale: [sX, sY, sZ]
    }
}


var st = window.getComputedStyle(elem, null);
var matrix = st.getPropertyValue("-webkit-transform") ||
		st.getPropertyValue("-moz-transform") ||
		st.getPropertyValue("-ms-transform") ||
		st.getPropertyValue("-o-transform") ||
		st.getPropertyValue("transform") ||
		"Either no transform set, or browser doesn't do getComputedStyle";

matrix = matrix.slice(9,-1).split(/,\s/g).map(parseFloat);

var values = extract(matrix);
console.log(values.rotate);