CSS3透视z轴可见性 [英] CSS3 perspective z-axis visibility
问题描述
我有一个DIV元素与CSS3透视。 DIV包含2个子DIV，其中一个在z轴上有一个翻译。这应该导致一个DIV在另一个前面，因此后面的一个应该被阻止查看。
然而，这些DIV的可见性似乎是由它们出现的顺序控制HTML，而不是由CSS3透视自动处理。
在下面的代码中，即使＃div3在z轴上位于＃div2后面，它显示在前面，因为它在HTML之后。
我知道我可以使用 z-index 属性来明确说明哪个DIV应该在前面，但是我再次为更自动化的方法。
I have a DIV element with CSS3 perspective on it. The DIV contains 2 child DIVs, and one of these has a translation on the z-axis. This should result in one DIV in front of the other, and so the one in behind should be blocked from view.
However, the visibility of these DIVs seem to be controlled by the order in which they appear in the HTML, instead of being handled automatically by CSS3 perspective.
In the code below, even though #div3 is behind #div2 on the z-axis, it shows up in front because it comes after in the HTML.
I am aware that I can use the z-index property to explicitly state which DIV should be in front, but again, I'm looking for a more automated method.
<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
推荐答案
：150px; 使用 transform：perspective（150px）; 。然后，还使用 transform-style：preserve-3d; ，使z轴可用。
Rather than using perspective: 150px; use transform: perspective(150px);. Then, also use transform-style: preserve-3d; so that the z-axis becomes usable.
是一个参考（使用旋转来帮助查看发生了什么）： http://jsfiddle.net/joshnh/ 4DjLP /
Here is a reference (with a rotation to help see what is going on): http://jsfiddle.net/joshnh/4DjLP/
以下是相关样式：
#div1 {
transform: perspective(150px);
transform-style: preserve-3d;
}
这篇关于CSS3透视z轴可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
