Multiple transforms

suggest change

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:

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents