javascript - Div 在 IE 上不翻转

Question

前言:我正在使用 CSS 和 jQuery 来创建翻转效果。

我是如何实现它的:为此目的，我使用preserve-3d。

好消息:它在所有主流浏览器上都运行良好

问题:它在 IE 中不起作用。

解决方案:最初我认为它没有应用保留，但后来我认为它只是没有触发后退元素。

帮助:请您帮忙，链接到我的JSFiddle

function flip() {
  $('.card').toggleClass('flipped');
}

.container {
  width: 200px;
  height: 260px;
  position: relative;
  border: 1px solid #ccc;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}
.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
}
.card div {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 140px;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card .front {
  background: red;
}
.card .back {
  background: blue;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.card.flipped {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="flip()">flip the card</button>
<section class="container">
  <div class="card" onclick="flip()">
    <div class="front">1</div>
    <div class="back">2</div>
  </div>
</section>

Answer 1

正如备注中所述，这是与 IE 的兼容性问题。

我建议一个简单的解决方法，希望它能有所帮助:

var ua = window.navigator.userAgent;
var msie = (ua.indexOf("MSIE ") > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) ? true : false;
var i = 0;

function flip() {
  $('.card').toggleClass('flipped')
  if (msie) {
    // the timeout happens after 400ms because on my computer this create the right effect
    i = (i + 1) % 2;
    setTimeout(function (i) {
      $('.card > div:eq(' + i + ')').css('backface-visibility', 'visible');
      $('.card > div:not(:eq(' + i + '))').css('backface-visibility', 'hidden');
    }, 400, i);
  }
}

.container {
  width: 200px;
  height: 260px;
  position: relative;
  border: 1px solid #ccc;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}
.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
}
.card div {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 140px;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card .front {
  background: red;
}
.card .back {
  background: blue;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.card.flipped {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<button onclick="flip()">flip the card</button>
<section class="container">
    <div class="card" onclick="flip()">
        <div class="front">1</div>
        <div class="back">2</div>
    </div>
</section>