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轴可见性

回答

相关问题