IE和翻轉動畫問題

Question

更新：最終弄清楚了-我在這里以及以下提供了答案。

我有一個不尋常的情況，我的翻轉動畫無法在IE中運行（如圖）-但是，它可以在所有其他瀏覽器（Chrome，FF，Opera，Edge和Safari）中運行...

我不能完全確定問題的根源在哪里-我搜尋了很多，但沒有任何幫助...很多人說使用背面可見性：隱藏； 帶有-ms-前綴，但是那也不起作用。 我什至嘗試在我的html文件上使用標簽，例如：

但無濟於事...

為什么IE必須如此困難：/

無論如何，這就是我所得到的，我將在下面提供一個示例，其中將使用與jsFiddle一起使用的代碼進行演示。

請使用INTERNET EXPLORER檢查文件，然后使用Chrome或其他瀏覽器進行比較。

的HTML：

 
 
 
 
  
  
  <div class="resume_contact_info_wrapper"> <div class="resume_contact_info"> <div class="front"> <div class="resume_abbr"> <p>Email |</p> <p>Phone |</p> <p>Located |</p> <p>Website |</p> </div> <div class="resume_abbr_info"> <p>email@example.com</p> <p>(550)555-5555</p> <p>Some State</p> <p><a href="#">Example.com</a></p> </div> <div class="resume_hire"> <a href="#">View Portfolio</a> <a href="#">View as PDF</a> <p>→ Check Availability ←</p> </div> </div> <div class="back"> <div class="schedule"> <p>Availability Calendar 2016</p> </div> <div class="resume_abbr"> <p>Jan |</p> <p>Feb |</p> <p>Mar |</p> <p>Apr |</p> <p>May |</p> <p>Jun |</p> <p>Jul |</p> <p>Aug |</p> <p>Sep |</p> <p>Oct |</p> <p>Nov |</p> <p>Dec |</p> </div> <div class="resume_abbr_info"> <p>Expired</p> <p>Expired</p> <p class="unavailable">Unavailable</p> <p class="unavailable">Unavailable</p> <p class="unavailable">Unavailable</p> <p class="available">Available</p> <p class="available">Available</p> <p class="available">Available</p> <p class="available">Available</p> <p class="available">Available</p> <p class="available">Available</p> <p class="available">Available</p> </div> <div class="resume_hire"> <p>→ Flip Back ←</p> </div> </div> </div> </div>
 
 
  

CSS：

 
 
 
 
  
  
  *, *:before, *:after { padding: 0; margin: 0; box-sizing: border-box; } .resume_contact_info_wrapper { width: 35%; min-height: 168px; padding: 0; margin: 0; float: left; transition: all 0.2s; perspective: 800px; } .resume_contact_info { width: 100%; padding: 0; margin: 0; float: left; } .front, .back { width: 100%; padding: 0 0 10px 0; margin: 0; background: #DDD; box-shadow: inset 0 1px #FFF, 0 -1px #000, 0 1px #D1D1D1, -1px 0 #000, 1px 0 #C5C5C5; border: 5px solid rgba(0, 0, 0, 0.7); border-radius: 3px; backface-visibility: hidden; transition: all 0.4s; transform-style: preserve-3d; position: absolute; top: 0; } .back { transform: rotateY(-180deg); } .flipped .back { transform: rotateY(0deg); } .flipped .front { transform: rotateY(180deg); } .resume_abbr { width: 35%; padding: 0; margin: 0; float: left; } .resume_abbr p { width: 100%; padding: 0; margin: 0; float: left; color: #666; font-size: .9em; font-weight: bold; text-align: right; text-shadow: 1px 1px #F1F1F1; cursor: default; } .resume_abbr p:first-child { padding: 10px 0 0 0; } .resume_abbr_info { width: 65%; padding: 0; margin: 0; float: left; } .resume_abbr_info p { width: 100%; padding: 0 0 0 5px; margin: 0; float: left; color: #777; font-size: .9em; text-shadow: 1px 1px #F1F1F1; cursor: default; } .resume_abbr_info p:first-child { padding: 10px 0 0 5px; } .resume_abbr_info p.available { color: #27AE60; } .resume_abbr_info p.unavailable { color: #C0392B; } .resume_abbr_info pa { float: none; color: #28F; } .resume_abbr_info pa:hover { text-decoration: underline; } .schedule { width: 100%; padding: 0; margin: 10px 0 0 0; float: left; } .schedule p { width: 100%; padding: 0; margin: 0; float: left; font-size: .9em; font-weight: bold; text-align: center; text-shadow: 1px 1px #F1F1F1; } .resume_hire { width: calc(100% - 20px); padding: 0; margin: 0 10px; float: left; } .resume_hire a { width: calc(50% - 5px); padding: 5px 0; margin: 12px 5px 0 0; border: 1px solid #28F; float: left; color: #28F; font-size: .75em; font-weight: bold; text-align: center; text-shadow: 1px 1px #F1F1F1; } .resume_hire a:last-of-type { margin: 12px 0 0 5px; } .resume_hire a:hover { background: #28F; box-shadow: inset 0 1px #459CFF; color: #DDD; text-shadow: -1px -1px rgba(0, 0, 0, 0.3); } .resume_hire p { width: 100%; padding: 5px 0; margin: 8px 0 0 0; background: #C0392B; box-shadow: inset 0 1px #E74C3C; border: 1px solid #C0392B; float: left; color: #DDD; font-size: .75em; font-weight: bold; text-align: center; text-shadow: -1px -1px rgba(0, 0, 0, 0.3); text-transform: uppercase; cursor: pointer; } .resume_hire p:hover { background: #E74C3C; box-shadow: inset 0 1px #FF5441; border: 1px solid #E74C3C; }
 
 
  

js：

 
 
 
 
  
  
  /*! * Author: Michael R. Draemel * http://draemel.com/ */ $('.resume_hire p').click(function() { $('.resume_contact_info').toggleClass('flipped'); });
 
 
  

jQuery->使用2.1.4

這是 FIDDLE

我能夠在 windows 7計算機上對此進行測試，並且動畫似乎可以正常工作...但是，在 windows 10計算機（使用 IE 11 ）上，它沒有...任何想法嗎？

任何幫助是極大的贊賞！

Answer 1

最終弄清楚了-這不是最好的解決方案，因為它似乎在翻轉動畫發生時會有點粘住-但它比以前完全不顯示動畫的顯示方式要好-在此修復程序之前，它只是顯示了正面，然后在單擊按鈕時消失了，然后又出現在背面...所以我要說這是一種改進，至少現在我們可以看到實際的翻轉動畫發生了。

CSS：

.resume_contact_info_wrapper {
  width: 25%;
  min-height: 168px;
  padding: 0;
  margin: 0;
  float: left;
  transition: all 0.2s;
  perspective: 800px;
    /* IE fix - Without this, flip animation is not seen */
    -ms-transform: perspective(800px) rotateY(0);
}

演示 -在IE10 +中查看，無論Windows OS是什么...