CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround

Question

After looking through IE10\'s developer blog I have found that they do not support the preserve-3d setting.

They do offer a workaround, but I can not seem to get it

Answer 1

Here is a far simpler flip algorithm, which will also work in IE. https://jsfiddle.net/mff4jzd2/8/

JAVASCRIPT:

        var state = 0;

        $('.container').on('click',function(){
            if(state == 0){

                state = 1;
                $('.front').addClass('flip-front');
                $('.back').addClass('flip-back');

            }
            else{

                state = 0;
                $('.front').removeClass('flip-front');
                $('.back').removeClass('flip-back');

            }   
        });

CSS:

    .container{

        width:170px;
        height:280px;
        display:inline-block;
        position:relative;
        transform: perspective(400px);
        cursor:pointer;

    }
    .front{

        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:blue;        
        transform: perspective(400px) rotateY(0deg);        
        backface-visibility: hidden;
        transition: 1.0s;
        opacity:1;
        box-shadow: 0 8px 6px -6px black;
    }
    .back{

        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:green;       
        transform: perspective(400px) rotateY(-180deg);         
        backface-visibility: hidden;
        transition: 1.0s;
        opacity:0;
        box-shadow: 0 8px 6px -6px black;
    }       
    .flip-front{
        opacity:0;
        transform: perspective(400px) rotateY(180deg);

    }
    .flip-back{
         opacity:1;  
         transform: perspective(400px) rotateY(0deg);
    }   

HTML: