IE11是否有“背面可见性：隐藏”替代方案？

Question

我正在尝试让卡在IE11中看起来像在Google Chrome中一样。所以我在寻找：

• 翻转时正面图像不会在背面显示

• 卡片翻转到背面后，背面的文字将可见，而正面则看不到

它在IE中都不起作用。该卡可在Google Chrome浏览器中使用，这就是我要使用的外观：****更新的内容***** https://jsfiddle.net/Lance_Bitner/a8sz1765/

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

在IE11中看起来很糟糕。启动看起来不错，但是当翻转卡时，可以在背面看到卡的正面。另外，该文本在背面也不可见。“背面可见性：隐藏；” CSS在IE 10或IE 11中不起作用。当卡片被翻转时，有没有办法使其正面不通过？我希望它保持透明，但是将卡的正面翻转到背面时会消失。

Answer 1

对于 IE10 和 IE11，还有“Backface-visibility:hidden”的替代方案！

<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>

在这里使用 JS 和 CSS：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");