Nik Nik - 4 months ago 15
CSS Question

Back text disappears when circle flips

Hi so Im trying to get a circle to flip when I hover over it. As of now, the circle flips and changes color, but once the animation finishes the text on the reverse side of the circle disappears.

Here is the HTML

<div class="header" ><!-- cardcontainer-->
<div class = "card">

<div class = "front">
<h1><span >Appointment Reminders</span></h1>
</div>
<div class = "back">
<h1> <span style = "position: relative; top: 10px;">Add patient<span></h1>
</div>
</div>
</div>


And here is the CSS

.header{
perspective: 700px;
}
body, html {
background: url(bg.jpg);
background-size: 110px 69px;
font-family: 'Playfair Display', serif;



}
body{
/*background-color: #ccf2ff;*/
background-color: #99ebff;
}
@-webkit-keyframes magnify {
from {background-color: #00e699; }
to {background-color: #00cc99;}
}
.header h1:hover{
/*background-color: #00cc99;
-webkit-animation-name: magnify; /* Chrome, Safari, Opera */
/* -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
/*animation-name: magnify;
animation-duration: 0.5s;
-webkit-animation-fill-mode: forwards;*/

}
.name{
font-size: 16px
}
@-webkit-keyframes magnifytext {
from {font-size: 16px; }
to {font-size: 18px;}
}
.name:hover{
-webkit-animation-name: magnifytext; /* Chrome, Safari, Opera */
-webkit-animation-duration: 0.1s; /* Chrome, Safari, Opera */
animation-name: magnifytext;
animation-duration: 0.1s;
-webkit-animation-fill-mode: forwards;


}

body p {
font-style: italic;
font-size: 16px;
}

.card{
border-radius: 100%;
background-color: #00e699;

box-shadow: 0 2px 5px rgba(0,0,0,0.25);
height: 200px;
width: 200px;
margin: 60px auto 0;

text-align: center;

z-index: 0;
transition: all 0.6s ease;
transform-style: preserve-3d;


}
.front, .back{

backface-visibility:hidden;
}


.back{
position: relative;
top: -191px;
margin: 60px auto 0;
transform: rotateY(180deg);
}
.header h1 {



}
.card:hover {
background-color:#cc00cc;
transform: rotateY(180deg);


}

.header h1 span {
color:#fff;

display: block;
font-size: 30px;
padding: 65px 0 0 0;

}

.header h1 span+span {
color:#000;
display: block;
font-size: 28px;
padding: 0;
}


.main .container {
background:#fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
margin: -70px auto 80px;
padding: 80px;
z-index: 0;
}

h1 {
color: #444;
font-family: 'Oswald', sans-serif;
font-size: 16px;
margin: 20px 0 0 0;
text-align: center;
text-transform: uppercase;
}

h2 {
border-bottom: 1px solid #444;
color: #000;
font-family: 'Oswald', sans-serif;
margin: 20px 0 10px;
padding: 0 0 10px 0;
text-transform: uppercase;
}

h3 {
color: #00cc99;
font-family: 'Oswald', sans-serif;
margin: 10px 0 5px;
text-transform: uppercase;
}

.price p {
font-family: 'Oswald', sans-serif;
font-size: 20px;
font-style: normal;
margin: 26px 0 5px;
text-align: right;
}


Thanks!

Answer

the problem is that you transform the "back"-div and on hover you try to transform the whole card, which transforms the front and the "back" divs once again. I hope this can help you:

<div class="header">
    <div class = "card">
        <div class = "front">
            <h1><span >Appointment</span></h1>
        </div>
        <div class = "back">
            <h1><span>Add patient</span></h1>
        </div>
    </div>
</div> 

and the css:

.header{
    perspective: 700px;
}
body{
    background-color: #99ebff;
}

.card {
    border-radius: 200px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
    height: 200px;
    width: 200px;
    margin: 60px auto 0;
    text-align: center;
    transition: all 0.6s ease;
    transform-style: preserve-3d;
}

.front, .back{
     position: absolute;
     height: 100%;
     width: 100%;
     border-radius: 100%;
     backface-visibility:hidden;
}

.front {
     background-color: red;
}

.back{
    background: green;
    transform: rotateY(-180deg);
}

.card:hover {
    transform: rotateY(180deg);
}

.header h1 span {
    color:#fff;
    display: block;
    font-size: 16px;
    padding: 65px 0 0 0;
}