Question

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

我不完全确定原因的根源在哪里 - 我已经搜索了一吨但没有任何帮助...很多人说使用backface-visibility: hidden;和{ {1}}前缀，但这也不起作用。我甚至尝试在我的html文件中使用-ms-标记，例如：

<meta>

但无济于事......危急。

为什么IE必须如此困难：/

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

请使用互联网浏览器检查出价，然后使用Chrome或其他浏览器进行比较。

HTML：

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=10; IE=11; IE=edge">

的CSS：

<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>

JS：

*,
*: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;
}

jQuery - ＆gt;使用2.1.4

以下是FIDDLE

非常感谢任何帮助！

更新

所以，我能够在windows7机器上测试这个并且动画似乎有效...但是，在windows10机器上（使用IE11），它没有...任何想法？

Answer 1

终于弄清楚了 - 它不是最好的解决方案，因为它似乎在翻转动画发生时有点 - - 但它 IS 比它之前的显示效果更好＆＃ 39; t显示动画 - 相反在此修复之前，它只显示正面，然后点击按钮消失，然后再次出现在背面...所以我说这是一个改进，至少现在我们看到实际的翻转动画发生。

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 - 无论Windows操作系统如何，都在IE10 +中查看...

Frickin＆＃39; IE ...

IE和翻转动画的不寻常案例

1 个答案: