カードフリップIEアニメーションの問題

Question

私はフリップアニメーションを作成しましたが、特にIE10、IE11では、カードが反転したときにテキストが反転しているようです。

以下の例のようにすべてのブラウザプレフィックスを追加しましたが、引き続き問題があります。

body { 
background: #ccc; 
} 
.flip { 
    -webkit-perspective: 800; 
    -ms-perspective: 800; 
    -moz-perspective: 800; 
    -o-perspective: 800; 
    width: 400px; 
    height: 200px; 
    position: relative; 
    margin: 50px auto; 
} 
.flip .card.flipped { 
    transform:rotatey(-180deg); 
    -ms-transform:rotatey(-180deg); /* IE 9 */ 
    -moz-transform:rotatey(-180deg); /* Firefox */ 
    -webkit-transform:rotatey(-180deg); /* Safari and Chrome */ 
    -o-transform:rotatey(-180deg); /* Opera */ 
} 
.flip .card { 
    width: 100%; 
    height: 100%; 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: 0.5s; 
    -moz-transform-style: preserve-3d; 
    -moz-transition: 0.5s; 
    -ms-transform-style: preserve-3d; 
    -ms-transition: 0.5s; 
    -o-transform-style: preserve-3d; 
    -o-transition: 0.5s; 
    transform-style: preserve-3d; 
    transition: 0.5s; 
} 
.flip .card .face { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    z-index: 2; 
    font-family: Georgia; 
    font-size: 3em; 
    text-align: center; 
    line-height: 200px; 
    backface-visibility: hidden; /* W3C */ 
    -webkit-backface-visibility: hidden; /* Safari & Chrome */ 
    -moz-backface-visibility: hidden; /* Firefox */ 
    -ms-backface-visibility: hidden; /* Internet Explorer */ 
    -o-backface-visibility: hidden; /* Opera */ 

} 
.flip .card .front { 
    position: absolute; 
    z-index: 1; 
    background: black; 
    color: white; 
    cursor: pointer; 
} 
.flip .card .back { 
    background: blue; 
    background: white; 
    color: black; 
    cursor: pointer; 

    transform:rotatey(-180deg); 
    -ms-transform:rotatey(-180deg); /* IE 9 */ 
    -moz-transform:rotatey(-180deg); /* Firefox */ 
    -webkit-transform:rotatey(-180deg); /* Safari and Chrome */ 
    -o-transform:rotatey(-180deg); /* Opera */ 

} 

Answer 1

以下

http://jsfiddle.net/uxable/YHeKX/

<div class="flip"> 
    <div class="card"> 
    <div class="face front">Front</div> 
    <div class="face back">Back</div> 
    </div> 
</div> 

CSS IE 10/11はtransform-style: preserve-3dプロパティをサポートしていません。

のSrc：https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransformspreserve3d

回避策：

• https://msdn.microsoft.com/library/hh673529(v=vs.85).aspx
• Creating flip card with CSS
• css card flip internet explorer
• CSS Flip card Internet Explorer issue