Click here to Skip to main content
14,643,162 members
Rate this:
Please Sign up or sign in to vote.
See more:
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:
    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);

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">
        <div class="flip_back" style="font-size:0.6em">

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".
Updated 20-Dec-16 3:56am
Prava-MFS 2-Jun-16 6:31am
I added your code over here: Can you please explain more about your issue. As per your description, I am unable to find the issue as it is working perfectly for me. Please explain more as I think I am missing something.

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

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.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100