In Firefox ist das Element mit positiven Drehwinkel oben

Question

Ich habe zwei Bilder auf meiner Seite mit Perspektive angewendet und einen Drehwinkel. Die Bilder sind absolut positioniert und überlappen sich leicht. Vorerst ist eines der Bilder (Bild B) auf rotateY(0deg); das andere (Bild A) hat rotateY(15deg); und bei Hover geht es auf rotateY(-15deg);. Das Problem ist, wenn der Winkel von Bild A 15 Grad ist, ist es hinter Bild B, aber auf Schwebeflug, wenn der Winkel auf -15 Grad ändert es Bild B überlappt. Es passiert nicht in Chrome. Ich habe versucht, Anti-Aliasing-Methoden und Preserve-3d und alles andere, was ich mir vorstellen konnte. Was könnte der Grund für dieses Verhalten in Firefox sein?

Edit: Hier ist ein Code:

<div class="col-sm-4" id="phone-container"> 
    <img id="htc" src="img/htc.png"> 
    <img id="samsung" src="img/samsung.png"> 
</div> 

Und Css:

#phone-container{ 
    position: relative; 
    height: 500px; 
    perspective: 500px; 
} 
#phone-container #htc{ 
    width: 42%; 
    position: absolute; 
    top: 34%; 
    left: 50%; 
    z-index: 1; 
    margin-left: -138px; 
    transform: rotateY(15deg); 
    transition: transform 0.3s; 
} 
#phone-container #htc:hover{ 
    transform: rotateY(-15deg); 
} 
#phone-container #samsung{ 
    width: 44%; 
    position: absolute; 
    top: 35%; 
    right: 50%; 
    z-index: 2; 
    margin-right: -139px; 
    transform: rotateY(0deg); 
} 

Answer 1

Ich hatte das gleiche Problem und ich gelöst, dass whith translateZ.

Die Einheit translateZ ist Pixel und Sie müssen die Z-Achse des Elements hinter dem gedrehten Element verschieben.

In Ihrem Fall sollten Sie etwas tun:

#phone-container #samsung{ 
    width: 44%; 
    position: absolute; 
    top: 35%; 
    right: 50%; 
    z-index: 2; 
    margin-right: -139px; 
    transform: rotateY(0deg) translateZ(__px); 
            ^Your desired pixels 
}