问题与IE9 +和翻转卡

Question

我有一个客户端的独特功能，点击一个div另一个div翻转它的位置，想像它像一张卡片，就像一些人有如何组合图像鳍状肢。不同之处在于它与VS图像内的内容翻转。

如何添加IE支持，因为它使用了保存三维动画？

在这里看到一个活生生的例子：

Live card

代码：

$(".cc").click(function(){$(this).toggleClass("active")});

.cc { 
 
    position: relative; 
 
    width: 90%; 
 
    height: 325px; 
 
    z-index: 1; 
 
    margin: 0 auto; 
 
    -ms-perspective: 1000; 
 
    -moz-perspective: 1000; 
 
    -webkit-perspective: 1000; 
 
    -o-perspective: 1000; 
 
    perspective: 1000; 
 
} 
 

 
.c { 
 
    width: 100%; 
 
    height: 100%; 
 
    -ms-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    -webkit-transform-style: preserve-3d; 
 
    -o-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -webkit-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
} 
 

 
.cc.active .c { 
 
    -ms-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -webkit-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
} 
 

 
.face { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    -ms-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
    -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,.5); 
 
    -moz-box-shadow: 0 0 7px 0 rgba(0,0,0,.5); 
 
    box-shadow: 0 0 7px 0 rgba(0,0,0,.5); 
 
} 
 

 
.face.front { 
 
    color: #fff; 
 
    background-color: #800605; 
 
} 
 

 
.face.front h2 { 
 
    text-align: center; 
 
    font-size: 2em; 
 
    padding: 30px 20px; 
 
} 
 

 
.face.back { 
 
    display: block; 
 
    -ms-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -webkit-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
    -ms-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -o-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    color: #fff; 
 
    background-color: #057F80; 
 
} 
 

 
.face.back p { 
 
    text-align: center; 
 
    font-size: .75em; 
 
    padding: 30px 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="cc"> 
 
<div class="c"> 
 
<div class="front face"> 
 
<h2> Fact 1 </h2> 
 
</div> 
 
<div class="back face"> 
 
<p> “Drinking cold water can help lower your temperature back to normal while in high heat or strong sun, when you’re at risk of heat exhaustion, heat stroke, and/or death. In addition, cold water is absorbed more quickly into your body than warm water, expediting rehydration according to Columbia University” (McAllister, 2013). </p></div> 
 
</div> 
 
</div>

编辑：我已经在我的回答如下固定的IE10 +支持。不过，我已经完成了IE9的操作，那血腥的事情不过是一个死亡装置。如果其他人可以修复它的IE9这是伟大的，否则这个问题可以考虑解决我答复我张贴。谢谢。

Answer 1

我不知道你是什么意思，当你说你添加了“支持”它。 Internet Explorer不支持这种类型的动画。

Answer 2

经过多次重写和测试后，我终于找到了一个解决方案，尽管它远没有接近原始代码。

活生生的例子： Click here

小提琴：Click Here

代码：

 function() { 
 
      function n(n) { 
 
       n.addEventListener("click", function() { 
 
        var n = this.classList; 
 
        n.contains("flipped") === !0 ? n.remove("flipped") : n.add("flipped") 
 
       }) 
 
      } 
 
      for (var o = document.querySelectorAll(".c.click"), e = 0, i = o.length; i > e; e++) { 
 
       var l = o[e]; 
 
       n(l) 
 
      } 
 
     }();

.c { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 90%; 
 
    height: 200px; 
 
    color: #fff; 
 
} 
 

 
.cb,.cf { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
    -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,.5); 
 
    -moz-box-shadow: 0 0 7px 0 rgba(0,0,0,.5); 
 
    box-shadow: 0 0 7px 0 rgba(0,0,0,.5); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -webkit-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
} 
 

 
.cf { 
 
    background-color: #800605; 
 
} 
 

 
.cb { 
 
    background-color: #000; 
 
    -webkit-transform: rotateY(-180deg); 
 
    transform: rotateY(-180deg); 
 
} 
 

 
.cf h2 { 
 
    font-size: 2em; 
 
    padding: 100px 20px; 
 
} 
 

 
.cb p { 
 
    font-size: .75em; 
 
    padding: 100px 20px; 
 
    text-align: center; 
 
} 
 

 
.c.click.flipped .cf { 
 
    -webkit-transform: rotateY(-180deg); 
 
    transform: rotateY(-180deg); 
 
} 
 

 
.c.click.flipped .cb { 
 
    -webkit-transform: rotateY(0); 
 
    transform: rotateY(0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="c click"> 
 
    <div class="cf"> 
 
     <h2> Fact 1 </h2> 
 
    </div> 
 
    <div class="cb"> 
 
      <p> Internet Explorer needs to just die off already. </p> 
 
    </div> 
 
</div>