JavaScript
var translateX = 114.13045149817947,
translateY = 73.76812744311489,
scaleX = 1.2472044184538178,
scaleY = 2.4053795477401807,
skewX = -0.7277673719159488,
skewY = 0.5890486225480862;
// apply sequential css transforms
var $css = $("#css");
$css.css("transform", "translate(" + [translateX, translateY].join('px,') + 'px) skewY(' + skewY + 'rad) scale(' + [scaleX, scaleY].join() + ') skewX(' + skewX + 'rad)');
var cssMat = window.getComputedStyle($css[0], null).getPropertyValue("transform");
$("#cssMat").text("via computed css: " + cssMat);
// now apply sequential affine multiplications
function multMat(m1, m2) {
var result = [];
for (var i = 0; i < m1.length; i++) {
result[i] = [];
for (var j = 0; j < m2[0].length; j++) {
var sum = 0;
for (var k = 0; k < m1[0].length; k++) {
sum += m1[i][k] * m2[k][j];
}
result[i][j] = sum;
}
}
return result;
}
// base
var mx = [
[1,0,0],
[0,1,0],
[0,0,1]
];
// translate
mx = multMat(mx, [
[1,0,translateX],
[0,1,translateY],
[0,0,1]
]);
// skewY
mx = multMat(mx, [
[1,0,0],
[skewY,1,0],
[0,0,1]
]);
// scale
mx = multMat(mx, [
[scaleX,0,0],
[0,scaleY,0],
[0,0,1]
]);
// skewX
mx = multMat(mx, [
[1,skewX,0],
[0,1,0],
[0,0,1]
]);
var aff = {
a: mx[0][0],
b: mx[1][0],
c: mx[0][1],
d: mx[1][1],
e: mx[0][2],
f: mx[1][2],
};
var $aff = $("#affine");
var affMat = "matrix(" + [aff.a,aff.b.toFixed(6),aff.c.toFixed(6),aff.d.toFixed(6),aff.e,aff.f].join() + ")";
$aff.css("transform", affMat);
$("#affMat").text("via affine multi: " + affMat);