問題與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>