Видимость оси Z в перспективе CSS3

У меня есть элемент DIV с точки зрения CSS3. DIV содержит 2 дочерних DIV, и один из них имеет перемещение по оси Z. Это должно привести к тому, что один DIV будет находиться перед другим, и поэтому тот, что позади, должен быть заблокирован от просмотра.
Однако видимость этих DIV, похоже, контролируется порядком, в котором они появляются в HTML, вместо этого автоматически обрабатывается с точки зрения CSS3.
В приведенном ниже коде, несмотря на то, что #div3 находится позади #div2 по оси Z, он отображается впереди, потому что он идет после в 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
person Daniel W    schedule 25.07.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вместо использования perspective: 150px; используйте transform: perspective(150px);. Затем также используйте transform-style: preserve-3d;, чтобы ось Z стала пригодной для использования.

Вот ссылка (с поворотом, чтобы помочь увидеть, что происходит): http://jsfiddle.net/joshnh/4DjLP/

И вот соответствующие стили:

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

arrow_upward
1
arrow_downward

Проверьте наличие overflow:hidden в контейнере «3D-пространство».

Сегодня я столкнулся с той же проблемой в Chrome, поэтому я попытался изменить свой -webkit-perspective: 300px; на -webkit-transform: perspective(300px); Но на самом деле это не помогло, но дало мне подсказку после того, как слои изменения перестали располагаться по оси Z вообще. Оказалось, что это был overflow:hidden в моем основном контейнере, для которого я устанавливал перспективу.

person Brock    schedule 03.05.2013