1

我有一个带有 CSS3 透视图的 DIV 元素。DIV 包含 2 个子 DIV，其中一个在 z 轴上有平移。这应该会导致一个 DIV 在另一个 DIV 前面，因此后面的 DIV 应该被挡在视线之外。
但是，这些 DIV 的可见性似乎是由它们在 HTML 中出现的顺序控制的，而不是由 CSS3 透视图自动处理的。
在下面的代码中，即使在 z 轴上 #div3 在 #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

4

2 回答 2

1

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

这是一个参考（旋转以帮助了解发生了什么）：http: //jsfiddle.net/joshnh/4DjLP/

以下是相关样式：

#div1 {
    transform: perspective(150px);
    transform-style: preserve-3d;
}
于 2012-07-25T08:26:48.817 回答
1

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

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

于 2013-05-03T08:52:43.733 回答