Я пытаюсь создать анимацию флип-карты с помощью CSS. Это хорошо работает на Firefox, Chrome, Opera, Safari, но у меня проблема с Internet Explorer (снова) ...

Посмотрите на демонстрацию, которую я сделал:Проблема с текстом в Internet Explorer

Это нормально в Firefox, Chrome, Opera и Safari!

Но мой текст инвертирован с помощью Internet Explorer ... Скажите, пожалуйста, что не так в моем коде?

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>