Back text disappears when circle flips - html

Question

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.
.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;
}
<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>
Thanks!

Answer 1

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;
}