IE9+ 和翻转卡问题

Question

我为客户提供了这个独特的功能，当点击一个 div 时，另一个 div 会在它的位置翻转，把它想象成一张卡片，就像有些人拥有那些投资组合图像翻转器一样。不同之处在于它会翻转 div 内的内容与图像。

既然它使用了 preserve-3d 动画，我该如何为其添加 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>