Click here to Skip to main content
15,867,975 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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:
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);
}


Then I have html codes as below:
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>


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".
Posted
Updated 20-Dec-16 3:56am
Comments
Prava-MFS 2-Jun-16 6:31am    
I added your code over here: http://codepen.io/pravasinis/pen/mEyomO. 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

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.
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900