javascript - IE11 是否有 “Backface-visibility:hidden” 替代方案？

Question

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

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

• 卡片背面翻转后可见背面文字，但正面看不到

它在 IE 中都不做。该卡在 Google Chrome 中工作，这就是我想要的外观: ****更新的 FIDDLE***** 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");