Question

我试图在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”的替代方案！

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

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

1 个答案: