translateZ ne fonctionne pas sur Firefox

Question

J'ai essayé de cacher un élément enfant "list" derrière l'élément parent "div2" en utilisant translateZ. Cela fonctionne fantastiquement en chrome mais pas sur firefox. Certains corps s'il vous plaît aider.

Lien vers JSFiddle. translateZ on firefox

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

S'il vous plaît trouver l'image ici Image Link

image sur le côté gauche qui fonctionne correctement sur le chrome. La barre jaune est derrière div div. L'image sur la droite est de firefox dans laquelle la barre jaune est en face de la div rouge - ce qui n'était pas prévu.

Answer 1

The transform-style: preserve-3d; isn't inherited, il doit être défini sur chaque descendant de la hiérarchie pour les conserver dans le même espace 3D.

Vous avez conservé l'héritage 3D dans #div1 et #div2, mais pas dans le petit-enfant .sub, de sorte que la lignée est rompu pour la .list grandgrandchild que vous souhaitez Z-move.

Si vous l'ajoutez à votre CSS .sub, il acceptera son enfant .list dans l'espace 3D et appliquera la transformation Z.

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