translateZはFirefoxで動作しません

Question

translateZを使用して、親エレメント "div2"の背後に子エレメント "list"を隠そうとしています。それはクロムで幻想的には動作しますが、Firefoxでは動作しません。いくつかの体は助けてください。

JSFiddleにリンクします。 translateZ on firefox

.list { 
    width: 200px; 
    height: 10px; 
    background-color: yellow; 
    -moz-transform: translateZ(-1em); 
    -webkit-transform: translateZ(-1em); 
} 

Chromeで正常に動作している左側の画像ここImage Link

画像を見つけてください。黄色のバーは赤いdivの後ろにあります。右側の画像はfirefoxのもので、黄色のバーが赤いdivの前にあります。これは予想外でした。

Answer 1

The transform-style: preserve-3d; isn't inheritedのように、同じ3D空間にそれらを保持するために、階層の各子孫に設定する必要があります。

あなたは#div1と#div2ではなく、 .sub孫で3Dの継承を保存しているので、血統はあなたがZ-移動したい.list grandgrandchildのために壊れています。

.sub CSSに追加すると、子供の.listが3D空間に受け入れられ、Z変換が適用されます。

.sub { 
    height: 20px; 
    width: 50px; 
    background-color: black; 
    transform-style: preserve-3d; 
}