Estoy tratando de crear una animación de carta invertida con CSS. Funciona bien en Firefox, Chrome, Opera, Safari, pero tengo un problema con Internet Explorer (nuevamente) ...

Mira la demo que hice:Problema de texto con Internet Explorer

¡Eso está bien en Firefox, Chrome, Opera y Safari!

Pero mi texto está invertido con Internet Explorer ... Por favor, ¿qué hay de malo en mi código?

CSS:

 <style>
    .flip-container {
        -webkit-perspective : 680;
        -ms-perspective: 680;
        -moz-perspective: 680;
        -o-perspective: 680;
        perspective: 680;            
    }

    .flip-container:hover .flipper, .flip-container.hover .flipper  {
        -webkit-transform:rotateY(180deg);
        -moz-transform:rotateY(180deg);
        -ms-transform:rotateY(180deg);
        -o-transform:rotateY(180deg);
        transform: rotateY(180deg);
    }

    .flip-container, .front .back {
        width:480px;
        height:340px;
    }

    .flipper {
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: 2.0s;
        -moz-transition: 2.0s;
        -ms-transition: 2.0s;
        -o-transition: 2.0s;
        transition: 2.0s;
        position: relative;
    }

    .front, .back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }

    .front {
        z-index: 2;
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);        }

    .back {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
</style>