翻转文本无法以HTML格式显示

本文介绍了翻转文本无法以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.