html - 圆形翻转时背面文字消失

Question

您好，当我将鼠标悬停在圆上时，我试图让圆翻转。到目前为止，圆圈会翻转并改变颜色，但是一旦动画结束，圆圈背面的文字就会消失。

.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>

谢谢!

Answer 1

问题是您变换“back”-div 并在悬停时尝试变换整个卡片，这会再次变换 front 和“back”div。希望对您有所帮助:

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

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