Rotational Animation by Linear Combination of Transformation Matrices leads to Zoom-In-Zoom-Out

I have a 3x3 matrix (startMatrix), which represents the actual view of an image (translation, rotation and scale). Now I create a new matrix (endMatrix) with an identitymatrix, new x- and y-coordinates,new angle and new scale like:

endMatrix = translate(identityMatrix, -x, -y);  
endMatrix = rotate(endMatrix, angle);  
endMatrix = scale(endMatrix, scale);
endMatrix = translate(endMatrix,(screen.width/2)/scale,screen.height/2)/scale);

And the functions (standard stuff)

function scale(m,s) {
    var n = new Matrix([
        [s, 0, 0],
        [0, s, 0],
        [0, 0, s]
    ]);
    return n.multiply(m);
}
function rotate(m, theta) {
    var n = new Matrix([
        [Math.cos(theta), -Math.sin(theta), 0],
        [Math.sin(theta), Math.cos(theta), 0],
        [0, 0, 1]
    ]);
    return n.multiply(m);
}
function translate(m, x, y) {
    var n = new Matrix([
        [1, 0, x],
        [0, 1, y],
        [0, 0, 1]
    ]);
    return n.multiply(m);
}

After that i transform the image with css transform matrix3d (3d only for hardware acceleration). This transform is animated with requestAnimationFrame.

My startMatrix is for example

And The endMatrix

The linear combination looks like:

With t going from 0 to 1

The result of the linear combination of transformation matrices (the resulting image position) is correct, my problem now is: If the new angle is about 180 degree different from the actual angle, the endMatrix values change from positive to negative (or the other way around). This leads to an zoom-in zoom-out effect in the animation of the transformed image.

Is there a way to prevent this preferably with using one matrix for transforming?