Why Does the Order of `perspective()` in CSS 3D Transforms Matter?

CSS 3D Transform Quirks: Perspective Ordering

CSS 3D transforms provide robust options for manipulating elements in three dimensions. However, one peculiar quirk has been observed: the order of the perspective() function within the transform property affects the resulting transformation.

Order Matters

Consider the following code snippet:

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

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

Here, the elements are intended to move in and out of the screen. However, the effect is only visible for the first box, while the second remains unaffected. This odd behavior arises because the order of the perspective() function matters.

Transform Computation

According to the CSS specification, the transform matrix is computed from the transform property in the following order:

1. Apply translation specified by transform-origin
2. Multiply by each transformation function, from left to right
3. Reverse transform specified by transform-origin

This means that the perspective() function must be applied first (i.e., leftmost) for its effects to be correctly considered.

Avoid Perspective within Transformed Elements

Additionally, it's important to avoid using the perspective property within the elements themselves. While this may seem logical, it's unnecessary and can lead to unexpected results.

Therefore, always ensure that the perspective() function is listed first in the transform property to achieve the desired 3D transformations.

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