Transform rotateY (180deg) не работает на IE

Question

Я использую transform: rotateY (180deg), чтобы перевернуть текст, но он не работает в IE.Я читал в Интернете, что 3D-перспектива не работает, но я не совсем уверен, что это значит для меня.

Обновление здесь - ссылка на страницу https://www.freedmaninternational.com/new-about-us-test/

-ms-transform: rotateY(180deg);
/* -webkit-transform: rotateY(180deg); */
-moz-transform: rotateY(180deg);

Это, кажется, не оказывает влияния.

Вот CSS

.flip-card {
background-color: transparent;
perspective: 1000px;
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
 transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

.flip-card-back {
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
 position: absolute;
bottom: 0%;
left: 0%;
right: 0%;
top: -30%;
height: 100%;
}

.flip-card:hover .flip-card-front h3 {
    opacity: 0;
}   

Мне нужно, чтобы он работал на IE и во всех браузерах.Любая помощь будет принята с благодарностью !!

Спасибо

Answer 1

Преобразование

сегодня хорошо поддерживается, и если вы все еще хотите использовать синтаксис префикса для старых браузеров, они должны быть записаны в первую очередь.

Правило без префикса должно быть написано последним, браузеры, которые его не поддерживают, не должны его видеть.

span{
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);/* should be the last, so the browser uses the latest rule it understands */

}

/* center x,y the test in old browser and IE11, else use flex or grid*/
html {
height:100%;
width:100%;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
text-align:center;
font-size:5vh
}

<span>ROTATION IN IE ?</span>