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