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>