Перевернутый текст не может быть отображен в HTML

---

Привет, у меня есть CSS, а также html-текст, в котором я буду использовать CSS, чтобы перевернуть 2 разных текста. Например, "Привет" и "мир".
Мой CSS как показано ниже:

.flip_container{
    width: 128.297px;
    height: 73.8906px;
}
.flip_container:hover .flip {      
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flip {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}
.flip_front, .flip_back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.flip_front {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.flip_back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

Тогда у меня есть html-коды, как показано ниже:

<div class="flip_container"'>
    <div class="flip" style="width: 50%;">
        <div class="flip_front" style="font-size:0.6em">
            Hello
        </div>
        <div class="flip_back" style="font-size:0.6em">
            World
        </div>
    </div>
</div>

Html всегда будет отображать только слово впереди(Hello), но когда я навожу курсор мыши, он переворачивается, но слово "мир" не появляется, а слово "Hello" не исчезает и просто зеркально отражается.

Что я уже пробовал:

Попытался поменять местами слова "привет " и"мир".

---