Lance B Lance B - 7 months ago 202
Javascript Question

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

I am trying to get a card to look, in IE 10 and 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 IE 10 and 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

There is an alternative for "Backface-visibility:hidden" for IE10 and IE11!

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");