원이 뒤집 으면 뒷 텍스트가 사라집니다.

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

문제는 "뒤"-div를 변형하고 호버 위에서 앞면과 "뒤"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; 
}