3D css transformation div couvrant ignorer problème de coordonnées z

C'est vraiment un problème assez compliqué à décrire verbalement. Jetez un oeil à cet extrait:3D css transformation div couvrant ignorer problème de coordonnées z

$("button").on("click",() => { 
 
\t $("#div1").css("transform","translateZ(50px)"); 
 
})

.testdiv { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    transition: transform 1s; 
 
    backface-visibility: hidden; 
 
} 
 

 
#container { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 100px; 
 
    perspective: 500px; 
 
} 
 

 
#div1 { 
 
    background-color: #f00; 
 
    margin-left: 50px; 
 
    transform: translateZ(10px); 
 
} 
 

 
#div2 { 
 
    background-color: #0f0; 
 
    transform: translateZ(30px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="div1" class="testdiv"> 
 
    1 
 
    </div> 
 
    <div id="div2" class="testdiv"> 
 
    2 
 
    </div> 
 
</div> 
 
<button>Move 1 to front 
 
</button>

utilisant à la fois Firefox et Chrome sur mon Mac, après avoir cliqué sur le bouton « Déplacer 1 à l'avant », div1 est toujours couvert par div2 même il est plus sur de l'écran (la valeur translateZ est plus élevée). Mon attente est que div1 devrait couvrir div2 une fois qu'il dépasse div2 sur l'axe z, puisque cela a plus de sens. (C'est un peu abstrait je sais)

Safari n'a pas ce problème - donc si vous réussissez à l'exécuter sur Safari, vous verrez ce que j'essaie de décrire. Je ne dis pas que la mise en œuvre de Safari est supérieure, mais en fait c'est le comportement que je cherche. Est-il possible d'obtenir le même effet sur Chrome et Firefox?

Source

2017-10-02 Richard Yan

Ehm, 'translateZ' ne change pas l'index z. –