¿Hay una alternativa “Backface-visibility: hidden” para IE11?

Estoy tratando de obtener una tarjeta para buscar, en IE11, como lo hace en Google Chrome. Entonces estoy buscando:

Tampoco lo hace en IE. La tarjeta funciona en Google Chrome y ese es el aspecto que estoy buscando: **** FIDDLE ACTUALIZADO ***** https://jsfiddle.net/Lance_Bitner/a8sz1765/

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

Se ve horrible en IE11. Se ve bien para comenzar, pero cuando se da vuelta la tarjeta, la parte delantera de la tarjeta se ve en la parte posterior. Además, el texto no está visible en el reverso. El “backface-visibility: hidden;” CSS no funciona para IE 10 o IE 11. Cuando la tarjeta se voltea, ¿hay alguna manera de hacerlo para que la parte frontal no se muestre? Me gustaría que permanezca transparente, pero la parte delantera de la tarjeta desaparecerá cuando se voltee hacia atrás.

Existe una alternativa para “Backface-visibility: hidden” para IE10 e IE11.

 

Insert the Text Here

Utilice el JS y CSS aquí: 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");