翻转文本无法以HTML格式显示 [英] Flip-back text cannot be displayed in HTML

问题描述

我有一个CSS和html文本，我将使用CSS翻转2个不同的文本。例如Hello和World。

我的CSS如下：

Hi, I have a CSS and also html text in which I will use CSS to flip 2 different texts. For example "Hello" and "World".
My CSS as below:

.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代码如下：

Then I have html codes as below:

<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这个词并没有消失，只是镜像了。



什么我试过了：



试图在Hello和World之间交换位置。

The html would always display only word in front(Hello) but when I hover the mouse, it does flipped but the word "World" does not appear and the word "Hello" does not disappear and just mirrored.

What I have tried:

Tried to swap places between the words "Hello" and "World".

推荐答案

请添加



.flip_front，.flip_back {left：0;右：0;}



它会在同一个地方显示你好和世界，而不是移动不同的地方两个字。

Please add

.flip_front, .flip_back{left:0; right:0;}

It will appear hello and world in same place,not moving different place two words.

这篇关于翻转文本无法以HTML格式显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！