So konservieren-3d mit CSS - firefox Problem

Question

Ich möchte in der Lage sein, TEXT1, TEXT2, TEXT3 usw. zu verstecken, wenn Sie mit der Maus über das Bild oder den Text schweben. Ich habe es geschafft, dies in Chrom zu tun, indem Sie transform-style: preserve-3d;

Der Link, den ich mit Ihnen teile, funktioniert in Chrome, aber nicht in Firefox.

Working Code Link (works in Chrome but not in Firefox)

#f1_card { 
    width: 100%; 
    height: 100%; 
    transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 

    /** fixes non transitive 3d from parent and child **/ 
    transform-style: preserve-3d; 
    transition: all 0.5s linear; 
    -webkit-border-radius: 200px; 
    -moz-border-radius: 200px; 
    border-radius: 200px; 
} 

Könnten Sie mir bitte helfen in Firefox mit diesem Thema aus?

Answer 1

Sie sollen die folgende Art Ihren CSS hinzufügen:

.face.front { 
    transform: rotateY(0deg); 
} 

Scheinen, wie dieses Problem bekannt ist. Sehen Sie hier Backface-Visibility Not Working Properly in Firefox (Works in Safari)

Hier ist für Ihr Beispiel beheben:

https://jsfiddle.net/tx3uf7ch/9/

Hier minimal-Code ist das Problem zu reproduzieren:

https://jsfiddle.net/5obugjqa/4/

Hier ist fix für sie:

https://jsfiddle.net/5obugjqa/3/

Bitte folgen Sie dieser Anleitung, wenn Sie fragen: How to create a Minimal, Complete, and Verifiable example. Und Sie werden entweder das Problem selbst lösen oder die Antwort viel schneller bekommen.