Comment préserver-3d en utilisant css - firefox issue

Question

Je veux pouvoir cacher TEXT1, TEXT2, TEXT3 etc. lorsque je passe la souris sur l'image ou le texte. J'ai réussi à faire cela en chrome en ajoutant transformer-style: preserve-3d;

Le lien que je partage avec vous fonctionne en chrome mais pas en 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; 
} 

Pourriez-vous s'il vous plaît aidez-moi cette question dans Firefox?

Answer 1

Vous devez ajouter le style suivant à votre css:

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

On dirait que cela est problème connu. Voir ici Backface-Visibility Not Working Properly in Firefox (Works in Safari)

Voici fixer votre exemple:

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

est ici un minimum de code pour reproduire le problème:

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

Voici correctif pour ce:

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

Veuillez suivre ce guide lorsque vous demandez: How to create a Minimal, Complete, and Verifiable example. Et vous pourrez soit résoudre le problème par vous-même, soit obtenir la réponse plus rapidement.