為什麼 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中文網其他相關文章！