How to Apply Multiple CSS Transforms in One Line and What's the Order of Application?

Applying Multiple CSS Transforms in One Line

In CSS, you can apply multiple transforms to an element simultaneously. However, if you provide multiple transform directives, only the last one will be applied.

To apply multiple transforms on one line, concatenate them with spaces:

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

Order of Application

It's crucial to note that multiple transforms are applied from right to left. This means the order of transforms matters, as:

transform: scale(1,1.5) rotate(90deg);

is different from:

transform: rotate(90deg) scale(1,1.5);

Example

Consider the following example:

.orderOne, .orderTwo {
    font-family: sans-serif;
    font-size: 22px;
    color: #000;
    display: inline-block;
}

.orderOne {
    transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
    transform: rotate(90deg) scale(1, 1.5);
}

You can observe the difference by applying the transforms in different orders.

The above is the detailed content of How to Apply Multiple CSS Transforms in One Line and What's the Order of Application?. For more information, please follow other related articles on the PHP Chinese website!