CSS3透視z軸可見性

我有一個CSS3透視圖的DIV元素。 DIV包含2個子DIV，其中一個在z軸上有翻譯。這應該導致一個DIV在另一個之前，所以後面的DIV應該被阻止查看。
但是，這些DIV的可見性似乎受它們出現在HTML中的順序控制，而不是由CSS3透視圖自動處理。
在下面的代碼中，即使＃div3在z軸上位於＃div2後面，它也會顯示在前面，因爲它出現在HTML中。
我知道我可以使用z-index屬性明確指出哪個DIV應該在前面，但是我再次尋找更自動化的方法。CSS3透視z軸可見性

<html> 
<head> 
<style type="text/css"> 
#div1 
{ 
position: relative; 
height: 150px; 
width: 200px; 
-moz-perspective:150px; 
-webkit-perspective:150px; 
} 
.child 
{ 
padding:50px; 
position: absolute; 
} 
#div2 
{ 
background-color: red; 
} 
#div3 
{ 
background-color: green; 
-moz-transform: translateZ(-50px); 
-webkit-transform: translateZ(-50px); 
} 
</style> 
</head> 
<body> 
<div id="div1"> 
    <div id="div2" class="child">HELLO</div> 
    <div id="div3" class="child">HELLO</div> 
</div> 
</body> 
</html>

參考：jsFiddle

來源

2012-07-25 Daniel W

而不是使用perspective: 150px;transform: perspective(150px);使用。然後，也使用transform-style: preserve-3d;，以便z軸變得可用。

這裏是一個參考值（用旋轉幫忙看看是怎麼回事）：http://jsfiddle.net/joshnh/4DjLP/

這裏是相關樣式：

#div1 { 
    transform: perspective(150px); 
    transform-style: preserve-3d; 
}

來源

2012-07-25 08:26:48 joshnh

檢查overflow:hidden你的「三維空間」容器。

我今天遇到了在Chrome中同樣的問題，所以我也嘗試改變我的-webkit-perspective: 300px;到-webkit-transform: perspective(300px); 但它實際上並沒有這樣的伎倆，但給我提示的原因後改層停止通過安排Z軸。原來我的主容器是overflow:hidden，我一直在設置透視圖。

來源

2013-05-03 08:52:43 Brock

CSS3透視z軸可見性

回答

相關問題