html - 変換を使用して div を作成する方法: マスクされたレイヤーの上に 3D スタックを変換します (Z インデックスが高いにもかかわらず機能しません)

Question

変換（CSS）を上に重ねてdivを作成しようとしています。ここにマークアップがあります。青い div の上に表示するには、緑の div だけが必要です。基本的に、青はマスクされたレイヤーで、緑はその上に表示されるダイアログです。

を設定してみましたがz-index、うまくいきません。ブルーは常にグリーンの上に表示されます。

また、青色の div を緑色の div の兄弟に変更すると機能しますが、マークアップを同じに維持したい、つまり、青色の div は緑色の div の兄弟の親です

ポインタはありますか？

これがjsフィドルリンクです... http://jsfiddle.net/YRTxt/9/

CSS

#wrapper{
    width:100%;
}
#red, #green{
    height:200px;
    width:400px;
}
#red{
    background-color:red;
    position:absolute;
    -webkit-transform: scale(1);
}
#pink{
    background-color:pink;
    height:250px;
    width:150px;
    top: 50px;
    position:absolute;
    -webkit-transform: translate3d(0%,0px,0px);
    -webkit-perspective: 1000;
}
#green{
    background-color:green;
    position:absolute;
    -webkit-transform: translate3d(0,0,0);
    top:100px;
    right: 0px;
    left: 0px;
    z-index: 1111;
}
#blue{
    background-color: blue;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    top:0px;
    right: 0px;
    z-index: 100;
}

HTML

<div id="wrapper">
    <div id="red">
        <div id="pink">
            <div id = "green"/>
        </div>
    </div>   
</div>
<div id="blue">
</div>