IE11のための "Backface-visibility：hidden"の代替品はありますか？

Question

Google Chromeのように、IE11で見るためのカードを取得しようとしています。

背面のテキストが表示されるように

を反転したときにカードがバックにひっくり返されたら

• 正面画像が背面にスルー表示しないように、ではない。だから私は探しています正面に見える

IEではどちらもしません。 **** 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にひどいです：GoogleのChromeとその中のカードの作品は私がつもりな外観です。それは始めるのがいいようですが、カードが裏返されると、カードの正面が裏側に見えます。また、テキストは裏面には表示されません。 "backface-visibility：hidden;" 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");