Ben Ben - 1 month ago 9
CSS Question

How to apply multiple transforms in CSS?

Using CSS, how can I apply more than one


Example: In the following, only the translation is applied, not the rotation.

li:nth-child(2) {
transform: rotate(15deg);
transform: translate(-20px,0px);

Answer Source

You have to put them on one line like this:

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);

When you have multiple transform directives, only the last one will be applied. It's like any other CSS attribute.