How Do I Apply Multiple CSS Transforms Correctly?

Applying Multiple CSS Transforms

CSS transforms allow developers to manipulate elements in various ways, including translation, rotation, and scaling. However, when applying multiple transforms to an element, only the last transformation is typically executed.

Problem:

In the following example, the translation transform is not applied because the rotation transform is placed after it:

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

Solution:

To apply multiple transforms, they must be placed on a single line, separated by spaces. The transforms will be applied from right to left:

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

Therefore, the rotation transform will be applied first, followed by the translation.

Order of Execution:

When applying multiple transforms, the order of the transforms matters. For instance, rotating an element 90 degrees and then scaling it by 1.5 will not produce the same result as scaling it first and then rotating it.

Consider the following demonstration:

.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);
}

In this example, ".orderOne" will appear rotated 90 degrees and scaled by 1.5, while ".orderTwo" will appear rotated 90 degrees and then scaled by 1.5. This demonstrates that the transform order matters and must be carefully considered when applying multiple transforms.

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