플립 보드와 유사한 CSS 플립 애니메이션

나는이 튜토리얼을 다음과 같이 수행하고 있습니다 : https://davidwalsh.name/css-flip 몇 가지 문제가 있습니다. 그것이 내가 이미지를 회전, 그것은 위로 뒤집하고 페이지에서 제외시켰다해야으로 플립 보드와 유사한 CSS 플립 애니메이션

.flip-container { 
 
    perspective: 1000px; 
 
} 
 
/* flip the pane when hovered */ 
 

 
.flip-container:hover .flipper, 
 
.flip-container.hover .flipper { 
 
    transform: rotateX(180deg); 
 
} 
 
.flip-container, 
 
.front, 
 
.back { 
 
    width: 320px; 
 
    height: 480px; 
 
} 
 
/* flip speed 
 
goes here */ 
 

 
.flipper { 
 
    transition: 0.6s; 
 
    transform-style: preserve-3d; 
 
    position: relative; 
 
} 
 
/* hide back of pane during swap */ 
 

 
.front, 
 
.back { 
 
    backface-visibility: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
/* front pane, placed above back */ 
 

 
.front { 
 
    z-index: 2; 
 
    /* for firefox 31 */ 
 
    transform: rotateX(0deg); 
 
} 
 
/* back, initially hidden pane */ 
 

 
.back { 
 
    transform: rotateX(180deg); 
 
} 
 
.vertical.flip-container { 
 
    position: relative; 
 
} 
 
.vertical .back { 
 
    transform: rotateX(180deg); 
 
} 
 
.vertical.flip-container .flipper { 
 
    transform-origin: 100% 213.5px; 
 
    /* half of height */ 
 
} 
 
.vertical.flip-container:hover .flipper { 
 
    transform: rotateX(-180deg); 
 
}

<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
 
    <div class="flipper"> 
 
    <div class="front"> 
 
     <!-- front content --> 
 
     <h1><center>This is the header</center></h1> 
 
     <h4><center>Some useful info</center></h4> 
 
     <p> 
 
     <center>Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.Bootstrap (currently v3.3.7) has a few easy ways to quickly 
 
      get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level 
 
      and use case. Read through to see what suits your particular needs.Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular 
 
      needs.Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</center> 
 
     </p> 
 

 
    </div> 
 
    <div class="back"> 
 
     <!-- back content --> 
 

 
     <h1><center>Title</center></h1> 
 
     <h4><center>Sub</center></h4> 
 
     <p> 
 
     <center>Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.Bootstrap (currently v3.3.7) has a few easy ways to quickly 
 
      get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level 
 
      and use case. Read through to see what suits your particular needs.Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular 
 
      needs.Bootstrap (currently v3.3.7) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</center> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>