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

CSS 3D 转换：透视交互

在 CSS 中应用 3D 转换时，执行顺序起着至关重要的作用。这在使用perspective()函数时尤其重要。

问题描述

用户观察到，transform属性根据是否使用perspective()而表现出不同的效果函数在属性值的开头或结尾声明。 Chrome 和 Firefox 浏览器中都出现了这种行为。

根本原因

根据 CSS 规范，变换矩阵是通过从左开始应用变换函数来计算的向右。当perspective()函数放在最后时，它会在所有其他转换（例如平移）之后应用。这会导致在执行翻译时不考虑透视。

解决方案

为了确保准确的 3D 转换，必须在变换属性的开始

示例：

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

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

在此示例中，第一个框将在 3D 空间中平移并应用透视效果，而第二个框则不会应用了透视图。

附加注意事项：

• 不建议在正在进行转换的元素中使用透视属性。这可能会导致意想不到的结果。
• 转换函数的顺序很重要，可能会影响结果。实验和探索不同序列的影响至关重要。

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