How Do I Apply Multiple CSS Transformations to an Element?

Transforming Elements with Multiple CSS Properties

CSS allows the application of multiple transformations to an element. However, when using the transform property multiple times, only the last directive takes effect. To apply multiple transformations, it's necessary to combine them on a single line.

Example:

In the following CSS, only the translation is applied to the element:

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

To apply both transformations, combine them on one line:

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

Order of Transformation

Multiple transformations applied on a single line are processed from right to left. This means the rightmost transformation is applied first.

Consider the following examples:

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

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

These two transformations will not produce the same result due to the different application order.

The above is the detailed content of How Do I Apply Multiple CSS Transformations to an Element?. For more information, please follow other related articles on the PHP Chinese website!