本文介绍了翻转文本无法以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格式显示
发布评论