CSS 2D Transforms Multiple transforms
Example
Multiple transforms can be applied to an element in one property like this:
transform: rotate(15deg) translateX(200px);
This will rotate the element 15 degrees clockwise and then translate it 200px to the right.
In chained transforms, the coordinate system moves with the element. This means that the translation won't be horizontal but on an axis rotate 15 degrees clockwise as shown in the following image:
Changing the order of the transforms will change the output. The first example will be different to
transform: translateX(200px) rotate(15deg);
<div class="transform"></div>
.transform {
transform: rotate(15deg) translateX(200px);
}
As shown in this image:
