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>