CSS3の3D変換、zオーダーが正しくありません

Question

私はz translateで2つの四角形を作成し、cssでperspective-originに入れます。 これはjsbin：https://jsbin.com/bebucum/edit?html,outputへのリンクです。続き

は、最も関連性の高いCSSです：

.container { 
    -webkit-perspective: 700; 
    -webkit-perspective-origin: 450px 000px; 
} 

.square:nth-child(1) { 
    -webkit-transform: translateZ(100px); 
} 
.square:nth-child(2) { 
    background: yellow; 
    -webkit-transform: translateZ(-200px); 
} 

出力のほとんどは、私には意味があります。しかし、私が理解していない部分があります。

黄色の四角は、そのtranslateZが負であるため、青の下にある必要があります。しかし、出力は逆です。

誰かが私にこの行動を理解する助けになることができますか？正しい3Dポジショニングを達成するために

Answer 1

、あなたは私もWebKitのプレフィックスを削除した

transform-style: preserve-3D; 

を設定する必要があり、彼らは今necesaryではありません。

.container { 
 
    perspective: 700px; 
 
    perspective-origin: 450px 0px; 
 
    transform-style: preserve-3D; 
 
} 
 

 
.square { 
 
    background: blue; 
 
    position: relative; 
 
    top: 300px; 
 
    left: 300px; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
.square:nth-child(1) { 
 
    transform: translateZ(100px); 
 
} 
 

 
.square:nth-child(2) { 
 
    background: yellow; 
 
    transform: translateZ(-200px); 
 
}

<div class="container"> 
 
    <div class="square"> 
 
    </div> 
 
    <div class="square"> 
 
    </div> 
 
</div>