IE11是否有“Backface-visibility：hidden”替代方案？ [英] Is there a “Backface-visibility:hidden” alternative for IE11?

问题描述

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

I am trying to get a card to look, in IE11, like it does in Google Chrome. So I am looking for:

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

• the front image to not show thru on the back when flipped

背面的文字在背面翻转时可见，但在正面看不到

the text on the back to be visible once the card is flipped on the back, but not seen on the front

它在IE中也没有。该卡适用于谷歌浏览器，这就是我想要的样子：****更新后的信息***** https://jsfiddle.net/Lance_Bitner/a8sz1765/

It doesn't do either in IE. The card works in Google Chrome and that is the look I am going for: ****UPDATED 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.当卡被翻转时，是否有一种方法可以使其正面显示通过？我希望它保持透明，但卡片的正面在翻转到背面时消失。

It looks awful in IE11. It looks fine to start, but when the card is flipped the front of the card is seen on the back side. Also, the text is not visible on the back side. The "backface-visibility: hidden;" CSS doesn’t work for IE 10 or IE 11. When the card is flipped is there a way to make it so the front side does not show thru? I would like it to remain transparent, but the front of the card to disappear when flipped to the backside.

推荐答案

有一个IE10和IE11的Backface-visibility：hidden替代方案！

There is an alternative for "Backface-visibility:hidden" for IE10 and IE11!

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

Use the JS and CSS here: 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是否有“Backface-visibility：hidden”替代方案？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！