为什么 CSS 3D 转换中'透视”的顺序很重要？

最后带有透视的 CSS 3D 转换：了解原因

CSS 3D 转换可以在 Web 元素上实现复杂的动画和透视效果。然而，当透视属性放置在转换列表的末尾时，出现了一个奇怪的观察结果。

问题：

在提供的代码片段中，两个框有不同的悬停行为。透视属性放置在第一个框的变换列表的末尾，而它位于第二个框的变换之前：

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

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

尽管两个变换看似相同，但这会导致不同的视觉结果。

答案：

理解这种行为的关键在于变换矩阵的顺序计算出来的。根据CSS Transform规范，矩阵计算如下：

1. 从单位矩阵开始。
2. 通过计算出的transform-origin的X和Y进行翻译。
3. 从左到右乘以变换属性中的每个变换函数。
4. 通过计算的 X 和 Y 值求反进行平移变换源。

说明：

在步骤 3 中，应用从从左到右 的转换至关重要。这意味着当透视放置在列表末尾时，翻译会在应用透视之前进行。

因此，翻译发生在没有透视效果的情况下，这就是为什么生成的结果运动显得平坦且没有深度。

含义：

• 始终放置视角属性位于转换列表的开头，以确保它在任何其他转换之前应用。
• 避免在要转换的元素内应用透视属性，因为它不会产生任何效果。

遵循这些准则，您可以通过正确应用透视属性来实现所需的 3D 变换效果。

以上是为什么 CSS 3D 转换中'透视”的顺序很重要？的详细内容。更多信息请关注PHP中文网其他相关文章！