IE 和翻转动画的问题

Question

更新：终于想通了——我在下面提供了答案HERE。

我有一个不寻常的情况，我的翻转动画在 IE 中不起作用（看图） - 但是，它在所有其他浏览器（Chrome、FF、Opera、Edge 和 Safari）上都起作用...

我不完全确定原因是什么——我已经搜索了很多，但没有任何帮助......很多人说要使用背面可见性：隐藏；带有 -ms- 前缀，但这也不起作用。我什至尝试在我的 html 文件上使用标签，例如：

但无济于事......URG。

IE为什么要这么难：/

无论如何，这就是我得到的，我将在下面提供一个示例，其中包含与 jsFiddle 一起使用的代码来演示它。

请使用 INTERNET EXPLORER 检查 FIDDLE，然后使用 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 p a {
  float: none;
  color: #28F;
}

.resume_abbr_info p a: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);
}

DEMO - 在 IE10+ 中查看，无论 Windows 操作系统如何...