Q: How to get a simple CSS 3D flip working on IE 10 and IOS Safari 8.1? I've created a simple flip card containing two sides. 
On hover, it rotates 180 degrees along the y axis to make the other side visible. 
It works as intended on chrome but on IE 10 and 11, it shows the mirrored front side instead of the back side of the card. From looking at Can I use, I think the issue is in the transform-style: preserve -3d css property.
Is there anyway of getting this working on IE and possibly IOS safari 8.1? 
Please check out below fiddle and try it on IE and Chrome to see the issue.
https://jsfiddle.net/vbknwjhq/5/
HTML Code:
<div class="container">    
   <div class="flipper">
        <div class="front">
             <p > front </p>
        </div>
        <div class="back">               
             <p>   back</p>
        </div>
   </div>
</div>


A: This one works on latest version of browser Chrome,Firefox,IE,Opera and Safari.
Demo
https://jsfiddle.net/DhwaniSanghvi/sx3fqe7b/
<div class="card">
    <div class="content">
        <div class="cardFront">Front</div>
        <div class="cardBack">Back</div>
    </div>
</div>


$('.card').hover(function(){$('.card').toggleClass('applyflip');}.bind(this));


  .card {
        perspective: 1000px;
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        -o-perspective: 1000px;
        -ms-perspective: 1000px;
        margin:80px 150px;
        width:100px;
        height:200px;
        vertical-align:top;
        position:absolute;
        display:block;
        font-size:25px;
        font-weight:bold;
    }

    .card .content {
        transition: 0.5s ease-out;
        -webkit-transition: 0.5s ease-out;
        -moz-transition: 0.5s ease-out;
        -o-transition: 0.5s ease-out;
        -ms-transition: 0.5s ease-out;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;

        /* content backface is visible so that static content still appears */
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        -moz-backface-visibility: visible;
        -o-backface-visibility: visible;
        -ms-backface-visibility: visible;


        border: 1px solid grey;
        border-radius: 15px;
        position:relative;
        width: 100%;
        height: 100%;

    }
    .card.applyflip .content {
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
    }



    .card .content .cardFront {
        background-color: skyblue;
        color: yellow;
    }

    .card .content .cardBack {
        background-color: tomato;
        color: skyblue;
    }

    .card .content .cardFront, .card .content .cardBack {
        /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        -ms-backface-visibility: visible;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        text-align: center;
        line-height:200px;
        border-radius: 14px;
    }
    .card .content .cardFront, .card.applyflip .content .cardFront {
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
    }

    .card .content .cardBack, .card.applyflip .content .cardBack {
        transform: rotateY(-180deg);
        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -o-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
    }

    .card .content .cardFront, .card.applyflip .content .cardBack {
        /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
        animation: stayvisible 0.5s both;
        -webkit-animation: stayvisible 0.5s both;
        -moz-animation: stayvisible 0.5s both;
        -o-animation: stayvisible 0.5s both;
        -ms-animation: donothing 0.5s;
        -ms-transition: visibility 0s linear 0.17s;
        visibility: visible;
    }
    .card.applyflip .content .cardFront, .card .content .cardBack {
        /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
        animation: stayvisible 0.5s both;
        -webkit-animation: stayvisible 0.5s both;
        -moz-animation: stayvisible 0.5s both;
        -o-animation: stayvisible 0.5s both;
        -ms-animation: donothing 0.5s;
        -ms-transition: visibility 0s linear 0.17s;
        visibility: hidden;
    }
    @keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
    @-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
    @-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
    @-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }

@-ms-keyframes donothing { 0% { } 100% { } }

