CSS翻转卡Internet Explorer问题

Question

我正在尝试在Internet Explorer 11中使用CSS翻转卡。我已阅读其他问题，解决方案是为翻转卡功能添加'-ms'前缀。我已经做到了这一点，但在IE 11中，由于某些原因翻转卡不显示背面。

http://jsbin.com/hazejuzezu/1/edit?html,css,js,output

任何帮助极大的赞赏。

HTML代码

<div class="flip y-theme-icon-wrapper"> 
    <div class="card text-center"> 
     <div class="face front"> 
      <div class="y-theme-icon"> 
       <img src="http://i.kinja-img.com/gawker-media/image/upload/s--4bKbxQOb--/1036281511469286726.jpg" height="90" alt=""> 
      </div> 
     </div> 
     <div class="face back"> 
      <br><p>More information about this subject.</p> 
     </div> 
    </div> 
</div> 

CSS代码：

.y-theme-icon-wrapper{ 
    width: 140px; 
    height: 140px; 
} 
.y-theme-icon { 
    display: block; 
    width: 140px; 
    height: 140px; 
    background: @color-1; 
    border-radius: 70px; 
    -webkit-border-radius: 70px; 
    -moz-border-radius: 70px; 
    -o-border-radius: 70px; 
    text-align:center; 
} 
.flip .card .back{ 
    background-color: #fff; 
} 
.flip { 
    -webkit-perspective: 800; 
    -ms-perspective: 800; 
    -moz-perspective: 800; 
    -o-perspective: 800; 
    position: relative; 
    margin: 12px auto; 
    height: 100px; 
    z-index: 1; 
    position: relative; 
} 
.flip .card.flipped { 
    transform:rotatey(-180deg); 
    -ms-transform:rotatey(-180deg); /* IE 9 */ 
    -moz-transform:rotatey(-180deg); /* Firefox */ 
    -webkit-transform:rotatey(-180deg); /* Safari and Chrome */ 
    -o-transform:rotatey(-180deg); /* Opera */ 
} 
.flip .card { 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: 0.5s; 
    -moz-transform-style: preserve-3d; 
    -moz-transition: 0.5s; 
    -ms-transform-style: preserve-3d; 
    -ms-transition: 0.5s; 
    -o-transform-style: preserve-3d; 
    -o-transition: 0.5s; 
    transform-style: preserve-3d; 
    transition: 0.5s; 
} 
.flip .card .face { 
    position: absolute; 
    z-index: 2; 
    text-align: center; 
    backface-visibility: hidden; /* W3C */ 
    -webkit-backface-visibility: hidden; /* Safari & Chrome */ 
    -moz-backface-visibility: hidden; /* Firefox */ 
    -ms-backface-visibility: hidden; /* Internet Explorer */ 
    -o-backface-visibility: hidden; /* Opera */ 
} 
.flip .card .front { 
    position: absolute; 
    z-index: 1; 
    cursor: pointer; 
} 
.flip .card .back { 
    color: black; 
    cursor: pointer; 
    transform:rotatey(-180deg); 
    -ms-transform:rotatey(-180deg); /* IE 9 */ 
    -moz-transform:rotatey(-180deg); /* Firefox */ 
    -webkit-transform:rotatey(-180deg); /* Safari and Chrome */ 
    -o-transform:rotatey(-180deg); /* Opera */ 
} 

/* Postcard */ 
.postcard-flip { 
    -webkit-perspective: 800; 
    -ms-perspective: 800; 
    -moz-perspective: 800; 
    -o-perspective: 800; 
    position: relative; 
    height: 500px; 
    z-index: 1; 
    position: relative; 
} 
.postcard-flip .card.flipped { 
    transform:rotatey(-180deg); 
    -ms-transform:rotatey(-180deg); /* IE 9 */ 
    -moz-transform:rotatey(-180deg); /* Firefox */ 
    -webkit-transform:rotatey(-180deg); /* Safari and Chrome */ 
    -o-transform:rotatey(-180deg); /* Opera */ 
} 
.postcard-flip .card { 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: 0.5s; 
    -moz-transform-style: preserve-3d; 
    -moz-transition: 0.5s; 
    -ms-transform-style: preserve-3d; 
    -ms-transition: 0.5s; 
    -o-transform-style: preserve-3d; 
    -o-transition: 0.5s; 
    transform-style: preserve-3d; 
    transition: 0.5s; 
} 
.postcard-flip .card .face { 
    position: absolute; 
    z-index: 2; 
    text-align: center; 
    backface-visibility: hidden; /* W3C */ 
    -webkit-backface-visibility: hidden; /* Safari & Chrome */ 
    -moz-backface-visibility: hidden; /* Firefox */ 
    -ms-backface-visibility: hidden; /* Internet Explorer */ 
    -o-backface-visibility: hidden; /* Opera */ 
} 
.postcard-flip .card .front { 
    position: absolute; 
    z-index: 1; 
    cursor: pointer; 
} 
.postcard-flip .card .back { 
    color: black; 
    cursor: pointer; 
    transform:rotatey(-180deg); 
    -ms-transform:rotatey(-180deg); /* IE 9 */ 
    -moz-transform:rotatey(-180deg); /* Firefox */ 
    -webkit-transform:rotatey(-180deg); /* Safari and Chrome */ 
    -o-transform:rotatey(-180deg); /* Opera */ 
} 

JS代码：

$(document).ready(function() { 
    /* Card flip */ 
    $(".flip").hover(function(){ 
     $(this).find(".card").toggleClass("flipped"); 
     return false; 
    }); 
}); 

Answer 1

我结束了使用解决方案由jbutler483从David Walsh博客提出，因为它具有平滑的翻转效果，并可在所有浏览器中工作。在这里我的代码：

HTML：

<div class="flip-container y-flip-wrapper" ontouchstart="this.classList.toggle('hover');"> 
    <div class="flipper"> 
     <div class="front text-center"> 
      <!-- front content --> 
      <div class="y-theme-icon"> 
       <img src="image.png" height="90" alt=""> 
      </div> 
     </div> 
     <div class="back text-center"> 
      <!-- back content --> 
      <p>More information about this subject.</p>  
     </div> 
    </div> 
</div> 

CSS：

/* entire container, keeps perspective */ 
.flip-container { 
    perspective: 1000; 
    transform-style: preserve-3d; 
    display: inline-block; 
} 

/* UPDATED! flip the pane when hovered */ 
.flip-container:hover .back { 
    transform: rotateY(0deg); 
} 
.flip-container:hover .front { 
    transform: rotateY(180deg); 
} 

.flip-container, .front { 
    width: 140px; 
    height: 140px; 
} 

.flip-container, .back { 
    width: 140px; 
} 


/* flip speed goes here */ 
.flipper { 
    transition: 0.6s; 
    transform-style: preserve-3d; 

    position: relative; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    backface-visibility: hidden; 
    transition: 0.6s; 
    transform-style: preserve-3d; 

    position: absolute; 
    top: 0; 
    left: 0; 
} 
.back{ 
    margin-top: 24px; 
} 

/* UPDATED! front pane, placed above back */ 
.front { 
    z-index: 2; 
    transform: rotateY(0deg); 
} 

/* back, initially hidden pane */ 
.back { 
    transform: rotateY(-180deg); 
}