为什么 CSS 3D 变换中 `perspective()` 的顺序很重要？

CSS 3D 变换怪癖：透视排序

CSS 3D 变换为在三个维度上操作元素提供了强大的选项。然而，我们观察到一个奇怪的现象：transform 属性中的perspective() 函数的顺序会影响最终的转换。

顺序很重要

考虑以下代码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);
}

这里，元素旨在移入和移出屏幕。但是，效果仅对第一个框可见，而第二个框不受影响。出现这种奇怪的行为是因为perspective()函数的顺序很重要。

变换计算

根据CSS规范，变换矩阵是根据transform属性计算的按以下顺序：

1. 应用指定的翻译transform-origin
2. 乘以每个变换函数，从左到右
3. 由transform-origin指定的逆变换

这意味着perspective()函数必须首先应用（即最左边），以便正确考虑其影响。

避免变换后的元素中的透视

此外，避免在元素本身中使用透视属性也很重要。虽然这看起来合乎逻辑，但却是不必要的，并且可能会导致意外结果。

因此，请始终确保在变换属性中首先列出perspective() 函数，以实现所需的 3D 变换。

以上是为什么 CSS 3D 变换中 `perspective()` 的顺序很重要？的详细内容。更多信息请关注PHP中文网其他相关文章！