Question

我有一个带有CSS3透视的DIV元素。 DIV包含2个子DIV，其中一个在z轴上有平移。这应该导致一个DIV在另一个之前，因此后面的那个应该被阻挡但是，这些DIV的可见性似乎受它们在HTML中出现的顺序控制，而不是由CSS3透视图自动处理。在下面的代码中，尽管#div3位于z轴的＃div2后面，但它显示在前面，因为它出现在HTML中。
我知道我可以使用z-index属性明确说明哪个DIV应该在前面，但同样，我正在寻找一种更自动化的方法。

<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

Answer 1

而不是使用perspective: 150px;使用transform: perspective(150px);。然后，也使用transform-style: preserve-3d;使z轴变得可用。

这是一个参考（通过旋转来帮助查看正在发生的事情）：http://jsfiddle.net/joshnh/4DjLP/

以下是相关的风格：

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

Answer 2

检查“3D空间”容器上的overflow:hidden。

我今天在Chrome中遇到了同样的问题，所以我尝试将-webkit-perspective: 300px;更改为-webkit-transform: perspective(300px); 但它实际上没有做到这一点，但在更改层停止通过Z轴排列之后给了我一个提示原因。原来在我的主要容器上overflow:hidden我一直在设置视角。

CSS3透视z轴可见性

2 个答案: