使用3D变换翻转在IE11中不起作用（我的不同）

我研究了CSS3 3d变换，最后我得到了一些CSS3 3d翻转动作的代码。 所以它在除Internet Explorer（IE11）之外的所有浏览器中都能正常工作。 所以我在stackoverflow.com上调查了这个问题。 我得到了一些解决方案，但遗憾的是那些对我没用。 所以请好好看一下我的jsfiddle链接并为此提供一些解决方案。

码：

$('#one').click(function() { if ($(this).is(':checked')) { $("#card").addClass("flipped"); $(".back #append").append("
First one
") } }); $('#two').click(function() { if ($(this).is(':checked')) { $("#card").addClass("flipped"); $(".back #append").append("
second one
") } }); $('#three').click(function() { if ($(this).is(':checked')) { $("#card").addClass("flipped"); $(".back #append").append("
third one
") } }); $('#close').click(function() { $("#card").removeClass("flipped"); }); 

 .container { width: 200px; height: 260px; position: relative; -ms-perspective: 800px; perspective: 800px; } #card { width: 100%; height: 100%; position: absolute; -ms-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform 1s; } #card figure { display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; margin:0px; padding:0px; } #card .front { background: red; } #card .back { background: blue; -ms-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } #card.flipped { -ms-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } #close{ position:absolute;bottom:0px;right:0px;color:#fff; } 

  
 
 
 one

 two

 three

 
 
 
 
close
 
 
  

有关详细信息，请参阅此链接： http ： //jsfiddle.net/Rayudu/jy0z8dy1/

请点击复选框然后翻转将发生并单击关闭按钮以删除翻转。

Answer 1

我之前遇到过同样的问题，发现在翻转状态下制作背面可以解决问题。 因此，对于您的情况，添加以下行应解决IE11（以及IE10）中的问题。

 #card.flipped figure{ backface-visibility: visible; } 

 $('#one').click(function() { if ($(this).is(':checked')) { $("#card").addClass("flipped"); $(".back #append").append("
First one
") } }); $('#two').click(function() { if ($(this).is(':checked')) { $("#card").addClass("flipped"); $(".back #append").append("
second one
") } }); $('#three').click(function() { if ($(this).is(':checked')) { $("#card").addClass("flipped"); $(".back #append").append("
third one
") } }); $('#close').click(function() { $("#card").removeClass("flipped"); }); 

 .container { width: 200px; height: 260px; position: relative; -ms-perspective: 800px; perspective: 800px; } #card { width: 100%; height: 100%; position: absolute; -ms-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform 1s; } #card figure { display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; margin: 0px; padding: 0px; } #card .front { background: red; } #card .back { background: blue; -ms-transform: rotateY(180deg); transform: rotateY(180deg); } #card.flipped { -ms-transform: rotateY(180deg); transform: rotateY(180deg); } #card.flipped figure { backface-visibility: visible; } #close { position: absolute; bottom: 0px; right: 0px; color: #fff; } 

  
 
 
 one 
 two 
 three 
 
 
 
 
 close