We can chain multiple transform functions and apply them on a single element.
Take a look at the example below.
We can chain any number of transforms by adding a space between them.
In the example above, have chained the transforms rotate
and translate
.
When chaining multiple transforms, they are applied from right to left.
Hence, in the example above, first the image gets translated to the right
by 100px
. However, the transform origin is still at the original position
which is the center. Therefore, the image rotates about the center and shifts
downwards.
Try changing the value passed in rotate
function to better understand
how the transforms interact.