CSS Multiple transforms


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:

Multiple transforms rotate then translate

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:

Multiple transforms translate then rotate