トランスフォームZが動作しない

Question

ここには私がこれまで持っていたもののjsbinがあります。

なぜtranformZが機能しないのか分かりません。私は視点を設定し、保存-3Dに設定するスタイルを変える必要があり、以下の

<div class="pyramid-container"> 
    <div id="pyramid"> 
    <div>child div of #pyramid</div> 
    </div> 
</div> 

そして、私のCSSがあるので、私は何が間違っているsuerはない午前：ここに私のhtmlです。

.pyramid-container { 
    perspective: 800px; 
} 

#pyramid { 
    position: relative; 
    height: 200px; 
    width: 100px; 
    transform-style: preserve-3d; 
    transform-origin: 116px 200px 116px; 
} 

#pyramid div { 
    position: absolute; 
    width: 0; 
    height: 0; 
    border-left: 200px solid transparent; /* left arrow slant */ 
    border-right: 200px solid transparent; /* right arrow slant */ 
    border-bottom: 200px solid #2f2f2f; /* bottom, add background color here */ 
    font-size: 0; 
    line-height: 0; 
    opacity: .5; 
} 

#pyramid div:nth-child(1) { 
    transform: translateZ(80em); 
} 

Answer 1

はあなたfont-sizeはそう80emが0px等しい要素を変換、ゼロに設定されます。変換には別の単位を使用するか、フォントサイズを大きくします。