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

我试图在IE11中看到一张卡片，就像在谷歌浏览器中一样。 所以我在寻找：

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

• 卡片背面翻转后背面的文字可见，但前面没有看到

它在IE中也没有。 这张卡适用于谷歌浏览器，这就是我想要的外观：****更新后的内容***** 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”的替代方案！

 
 
 
 
 
  
 
Insert the Text Here
 
 
  

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