1

CSS3 パースペクティブを含む DIV 要素があります。DIV には 2 つの子 DIV が含まれており、そのうちの 1 つは z 軸に平行移動します。これにより、1 つの DIV が他の DIV の前に表示されるため、後ろにある DIV はビューからブロックされます。
ただし、これらの DIV の可視性は、CSS3 パースペクティブによって自動的に処理されるのではなく、HTML に表示される順序によって制御されるようです。
以下のコードでは、#div3 が z 軸上では #div2 の後ろにありますが、HTML では後ろにあるため、前に表示されます。プロパティを使用して、どの DIV を前に置くべきかを明示的
に示すことができることは承知していますが、やはり、より自動化された方法を探しています。z-index

<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

overflow:hidden「3D スペース」コンテナーを確認してください。

今日Chromeでまったく同じ問題が発生したので、に変更してみ-webkit-perspective: 300px;まし-webkit-transform: perspective(300px); たが、実際にはうまくいきませんでしたが、変更レイヤーがZ軸を介して配置されなくなった後、ヒントの原因がわかりました。overflow:hiddenそれは、私がパースペクティブを設定してきたメインのコンテナにあることが判明しました。

于 2013-05-03T08:52:43.733 に答える
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 に答える