Why does order of transforms matter in Xcode?

Question

These two sequences give two different results in an image layer that this transform is applied to. I don't seem to get the reason why... Can anyone give an explanation for this?

/* first sequence of transformation */
CGAffineTransform transform = CGAffineTransformIdentity;
transform = CGAffineTransformRotate(transform, M_PI / 180 * 30);
transform = CGAffineTransformTranslate(transform, 100, 0);

/* second sequence of transformation */
CGAffineTransform transform = CGAffineTransformIdentity;
transform = CGAffineTransformTranslate(transform, 100, 0);
transform = CGAffineTransformRotate(transform, M_PI / 180 * 30);

Answer 1

Short (technical) answer: Because a transform is really just a matrix and when you concatenate two transforms, the two matrices are multiplied. Matrix multiplication isn't commutative, meaning that 𝐀⨉𝐁 (AB) is not the same as 𝐁⨉𝐀 (BA). In other words, the order matters.

I have previously written about combining translations and rotations and about the math behind transforms (i.e. an into to matrix mathematics). These two can be good resources if you want to learn more about how transforms work.

There is also a nice project by Richard Turton on GitHub for experimenting with transforms that can be very useful for grasping the concepts of how the order of different transforms impact the end result.