If you guys don’t know how to apply multiple transform properties to an element, so here is the example.
But first you guys need to know how it works. So keep in mind that the transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.
See the below example, this will rotate the element 20 degrees clockwise and then translate it 300px to the right.
transform: rotate(20deg) translateX(300px);
But if we change the order of the transforms will change the output. The result will be different.
transform: translateX(300px) rotate(20deg);
