How Does Transform Order Affect 3D CSS Transforms, Especially Perspective?

CSS 3D Transforms: Perspective Placement and Transform Order

In CSS, the perspective property affects the way 3D transforms are applied to elements. However, users have observed that changing the position of the perspective setting can impact the transform outcome.

Problem Explanation

The sequence in which transforms are applied is crucial. According to the CSS specifications, the transformation matrix is calculated by applying the transformations in the 'transform' property from left to right. If the perspective is set at the end of the 'transform' property, the translation occurs before considering the perspective.

Transform Order

To avoid this issue, the perspective should always be placed first in the 'transform' property. By doing so, the perspective is applied before any other transformations, ensuring that the translations occur correctly.

Example

Consider the following code:

box:nth-child(1):hover {
  transform: perspective(1000px) translate3d(0, 0, -100px);
}

box:nth-child(2):hover {
  transform: translate3d(0, 0, 100px) perspective(1000px);
}

In the first box, the perspective is set before the translation, ensuring that the translation occurs with the perspective applied. In the second box, the perspective is set after the translation, resulting in the translation being applied without considering the perspective.

Additional Notes

• Placing the perspective within the element itself is unnecessary.
• The order of other transformations (e.g., rotate, scale) is also significant. transformations applied later in the sequence may affect those applied earlier.

The above is the detailed content of How Does Transform Order Affect 3D CSS Transforms, Especially Perspective?. For more information, please follow other related articles on the PHP Chinese website!