Why Does the Order of `perspective` in CSS 3D Transformations Matter?

CSS 3D Transformations with Perspective at the End: Understanding the Reason

CSS 3D transformations enable intricate animations and perspective effects on web elements. However, a curious observation emerged when the perspective property is placed at the end of the transformation list.

Problem:

In the snippet provided, two boxes have different hover behaviors. The perspective property is placed at the end of the transformation list for the first box, while it precedes the transformation for the second box:

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

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

This results in different visual outcomes despite both transformations seemingly being identical.

Answer:

The key to understanding this behavior lies in the order in which the transformation matrix is computed. According to the CSS Transform specification, the matrix is calculated as follows:

1. Start with the identity matrix.
2. Translate by the computed X and Y of transform-origin.
3. Multiply by each transform function in the transform property from left to right.
4. Translate by the negated computed X and Y values of transform-origin.

Explanation:

In step 3, it is crucial to apply the transformations from left to right. This means that when perspective is placed at the end of the list, the translation is performed before the perspective is applied.

As a result, the translation occurs in the absence of the perspective effect, which is why the resulting movement appears to be flat and without depth.

Implications:

• Always place the perspective property at the beginning of the transformation list to ensure that it is applied before any other transformations.
• Avoid applying the perspective property within the element you want to transform, as it will have no effect.

By following these guidelines, you can achieve the desired 3D transformation effects with the correct application of the perspective property.

The above is the detailed content of Why Does the Order of `perspective` in CSS 3D Transformations Matter?. For more information, please follow other related articles on the PHP Chinese website!