how to get css3 flip animation to ie9

Question

I requested to do the fllip animation for my web app. the issue is i need to include the ie9.

I did for the modern browsers, but i am stucked with ie9.

And any one figure-out the best alternative to make this in ie9

I have modernizer already, so using that i can find the browser properly.

Please i am looking for simple approach. as much as possible please avoid plug-ins.

here is my existing code :

HTML :

<div class="container">
    <div class="box-front">Front :)</div>
    <div class="box-back">Back :D </div>   
</div>

CSS :

.container{
    margin:30px auto;
    /* How pronounced should the 3D effects be */
    perspective: 500;
    -webkit-perspective: 500;
    -moz-perspective: 500;
    -ms-perspective: 500;
    -o-perspective: 500;
    width:150px;
    height:150px;
    position:relative;
    /*Some UI */
    border-radius:6px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    -ms-border-radius:6px;
    -o-border-radius:6px;
    font-size:28px;
    line-height:150px;
    vertical-align:middle;
    cursor:pointer;
}

.box-front,.box-back{
        /* Enable 3D transforms */
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
         backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
         width:100%;
        height:100%;
        position:absolute;
        background-color:#0090d9;
        /* Animate the transitions */
        -webkit-transition:0.8s; text-align:center;
        -moz-transition:0.8s; text-align:center;
        -ms-transition:0.8s; text-align:center;
        -o-transition:0.8s; text-align:center;
        transition:0.8s; text-align:center;
        color:#FFF;
        border-radius:6px;
        -webkit-border-radius:6px;
        -moz-border-radius:6px;
        -ms-border-radius:6px;
        -o-border-radius:6px;
        }

.box-back{
        /* The back side is flipped 180 deg by default */
        transform:rotateY(180deg);
        -webkit-transform:rotateY(180deg);
        -moz-transform:rotateY(180deg);
        -ms-transform:rotateY(180deg);
        -o-transform:rotateY(180deg);
        background-color:#f35958;

        }

.container:hover .box-front{
        /* When the container is hovered, flip the front side and hide it .. */
        transform:rotateY(180deg);
        -webkit-transform:rotateY(180deg);
        -moz-transform:rotateY(180deg);
        -ms-transform:rotateY(180deg);
        -o-transform:rotateY(180deg);
        }

.container:hover .box-back{
        /* .. at the same time flip the back side into visibility */
        transform:rotateY(360deg);
        -webkit-transform:rotateY(360deg);
        -moz-transform:rotateY(360deg);
        -ms-transform:rotateY(360deg);
        -o-transform:rotateY(360deg);
        }

Live Demo

Answer 1

I wish I could comment before submitting my answer but I don't have enough points yet. Could you use an image as a flipping element ? I came up with slightly different approach using jQuery.

Please check JSFIDDLE

I don't know if this is what you needed

<div class="container">
   <img src="http://placehold.it/350x150" width="60%" max-width: "100%" alt="HTML">
</div>

.box-back {
  position: relative;
  top: 30px;
  background-color:#f35958;
  width: 100%;
  height: 100%;
}

jQuery

$(document).ready(function () {


$('.container').css({
    'perspective': '0',
        'perspective-origin': '50% 50%'
});
var compLogo = $('img[alt~="HTML"]');
compLogo.hover(function () {
    $({
        rotateVar: 0
    }).animate({
        rotateVar: 180
    }, {
        duration: 2000,
        easing: 'linear', //easeOutElastic
        step: function (now, abc) {
            compLogo.css('transform', 'rotateY(' + now + 'deg)');
        }
    })
}, function () {
    $({
        rotateVar: 0
    }).animate({
        rotateVar: 0
    }, {
        duration: 2000,
        easing: 'linear',
        step: function (now, abc) {
            compLogo.css('transform', 'rotateY(' + now + 'deg)');
        }
    })
  });
});