Ben Ben - 5 months ago 33
CSS Question

How to apply multiple transforms in CSS?

Using CSS, how can I apply more than one

transform
?

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.