CSS3透视z轴可见性答案

【问题标题】：CSS3 perspective z-axis visibilityCSS3透视z轴可见性
【发布时间】：2013-05-03 16:52:43
【问题描述】：

我有一个带有 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

【问题讨论】：

标签： css perspective

【解决方案1】：

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

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

以下是相关样式：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：