Gibt es eine "Backface-Sichtbarkeit: versteckte" Alternative für IE11?

Question

Ich versuche, eine Karte in IE11 zu suchen, wie in Google Chrome. Also ich suche:

• das vordere Bild nicht durch auf der Rückseite zu zeigen, wenn

• der Text auf der Rückseite gespiegelt sichtbar zu sein, sobald die Karte auf der Rückseite umgedreht wird, aber nicht gesehen auf der Vorderseite

Es tut auch nicht in IE. Die Karte funktioniert in Google Chrome und das ist der Blick, den ich für werde: **** AKTUALISIERT FIDDLE ***** https://jsfiddle.net/Lance_Bitner/a8sz1765/

.front, .back { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 

Es sieht schrecklich in IE11. Es sieht gut aus zu starten, aber wenn die Karte umgedreht wird, ist die Vorderseite der Karte auf der Rückseite zu sehen. Außerdem ist der Text auf der Rückseite nicht sichtbar. Das "backface-visibility: hidden;" CSS funktioniert nicht für IE 10 oder IE 11. Wenn die Karte umgedreht wird, gibt es eine Möglichkeit, es so zu machen, dass die Vorderseite nicht durchscheint? Ich möchte, dass es transparent bleibt, aber die Vorderseite der Karte verschwindet, wenn sie nach hinten gekippt wird.

Answer 1

Es gibt eine Alternative für "Backface-Sichtbarkeit: versteckt" für IE10 und IE11!

<div class="card-container"> 
<div class="flipcard h"> 
<div class="front" style="background-image:url 'http://cdn.tutorialzine.com/wp-content/uploads/2010/03/797.jpg'); background-size: 50%;"> 
</div> 
<div class="back"> 
    <img id="" src="http://cdn.tutorialzine.com/wp-content/uploads/2010/03/797.jpg" style="width:80%;padding-bottom:0px"> 
    <hr> 
    <p style="color:black;">Insert the Text Here</p> 
    </div> 
</div> 
</div> 

Verwenden Sie die JS und CSS hier: https://jsfiddle.net/Lance_Bitner/pcLq688j/

.flipcard { 
position: relative; 
width: 300px; 
height: 220px; 
perspective: 500px; 
} 
.flipcard.v:hover .front, .flipcard.v.flip .front{ 
transform: rotateX(180deg); 
} 
.flipcard.v:hover .back, .flipcard.v.flip .back{ 
transform: rotateX(0deg); 
} 
.flipcard.v .back{ 
transform: rotateX(-180deg); 
} 
.flipcard.h:hover .front, .flipcard.h.flip .front{ 
transform: rotateY(180deg); 
} 
.flipcard.h:hover .back, .flipcard.h.flip .back{ 
transform: rotateY(0deg); 
} 
.flipcard.h .back{ 
transform: rotateY(-180deg); 
} 
.flipcard .front, .flipcard .back 
{ 
position:absolute; 
width: 100%; 
height: 100%; 
box-sizing: border-box; 
transition: all 1.0s ease-in; 
color: white; 
background-color: rgba(255,255,255,.10); 
padding: 10px; 
backface-visibility: hidden; 
margin:25px; 
box-shadows: 10px 10px 5px #999798; 
border: 1px solid rgba(123, 46, 0, 0.40); 
border-radius: 10px; 
} 
document.querySelector('#cardId').classList.toggle('flip'); 
// or using jQuery 
// $("#cardId").toggleClass("flip");