Is there a “Backface-visibility:hidden” alternative for IE11?

Question

I am trying to get a card to look, in IE11, like it does in Google Chrome. So I am looking for:

• the front image to not show thru on the back when flipped

• the text on the back to be visible once the card is flipped on the back, but not seen on the front

It doesn't do either in IE. The card works in Google Chrome and that is the look I am going for: ****UPDATED FIDDLE***** https://jsfiddle.net/Lance_Bitner/a8sz1765/

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

It looks awful in IE11. It looks fine to start, but when the card is flipped the front of the card is seen on the back side. Also, the text is not visible on the back side. The “backface-visibility: hidden;” CSS doesn’t work for IE 10 or IE 11. When the card is flipped is there a way to make it so the front side does not show thru? I would like it to remain transparent, but the front of the card to disappear when flipped to the backside.

Answer 1

There is an alternative for "Backface-visibility:hidden" for IE10 and 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>

Use the JS and CSS here: 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");