jquery - 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 只是不支持这种类型的动画。