translateZ不能在火狐上工作

我一直在試圖用translateZ隱藏父元素「div2」後面的子元素「list」。它在chrome中運行得非常好，但不是在Firefox上運行。有些人請幫忙。translateZ不能在火狐上工作

.list { 
    width: 200px; 
    height: 10px; 
    background-color: yellow; 
    -moz-transform: translateZ(-1em); 
    -webkit-transform: translateZ(-1em); 
}

請在這裏找到圖像Image Link

圖片左邊這是對鉻正常工作。黃色酒吧在紅色後面。右邊的圖片來自firefox，其中黃色欄位於紅色格子的前面 - 這不是預期的。

來源

2017-10-07 User850309

嗨，你可以顯示圖像的好和錯嗎？ – 2017-10-07 21:25:37

Firefox和Chrome都不需要這個前綴，而且Chrome已經有多年沒有成爲「webkit」了。此外，你需要在這裏發佈你的標記，而不是一個可以改變或消失明天幫助沒有人的jsfiddle：[mcve] – Rob

The transform-style: preserve-3d; isn't inherited，它必須設置爲層次結構中的每個後代，以使它們保持在相同的3D空間中。

你在#div1和#div2保存3D繼承，但不能在 .sub孫子，所以血統被打破了.list grandgrandchild你希望Z-舉動。

如果您將它添加到您的.sub CSS中，它會將其子.list接受到3D空間中並應用Z變換。

.sub { 
    height: 20px; 
    width: 50px; 
    background-color: black; 
    transform-style: preserve-3d; 
}

來源

2017-10-07 23:12:00 prkos

非常感謝@prkos。你拯救了我的一天。 – User850309

translateZ不能在火狐上工作

回答

相關問題