CSS3 animation : rotateX로 두 개 이상의 div를 뒤집기

Question

현재 두 div의 내용 사이에 뒤집기 효과를 생성하는 다음 HTML과 CSS가 있습니다.

4 개 (또는 그 이상) div 사이를 뒤집어서 어떻게 확장 할 수 있습니까?

이러한 접근 방법 중 하나가 앞으로 나아갈 수 있다고 생각했지만 구현 방법을 잘 모르겠습니다.

• 애니메이션을 rotateX(90deg)에서 일시 중지 한 다음 두 번째 애니메이션 세트를 시작하십시오.
• 이거나 div3의 콘텐츠가 rotateX(90deg) 일 때 변경하십시오.

HTML

<div class="flip1"> 
    FLIP 1<br /> 
    FLIP 1<br /> 
    FLIP 1<br /> 
    FLIP 1<br /> 
</div> 
<div class="flip2"> 
    FLIP 2<br /> 
    FLIP 2<br /> 
    FLIP 2<br /> 
    FLIP 2<br /> 
</div> 

CSS

div { 
    -webkit-animation-duration: 4s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function:linear; 
    -webkit-backface-visibility: hidden; 
    color: blue; 
    font-family: Helvetica,Arial,sans-serif; 
    font-weight: bold; 
    padding: 20px; 
    position: absolute; 
} 

@-webkit-keyframes flip1 { 
    from { -webkit-transform: rotateX(0deg); } 
    to { -webkit-transform: rotateX(360deg); } 
} 

div.flip1 { 
    -webkit-animation-name: flip1; 
} 

@-webkit-keyframes flip2 { 
    from { -webkit-transform: rotateX(-180deg); } 
    to { -webkit-transform: rotateX(180deg); } 
} 

div.flip2 { 
    -webkit-animation-name: flip2; 
} 

Answer 1

나는 자바 스크립트의 터치와 함께 결국 있었을 것입니다.

html로했다 :

<div class="flippable" id="flip1"> 
    FLIP 1<br /> 
    FLIP 1<br /> 
    FLIP 1<br /> 
    FLIP 1<br /> 
</div> 
<div class="flippable" id="flip2"> 
    FLIP 2<br /> 
    FLIP 2<br /> 
    FLIP 2<br /> 
    FLIP 2<br /> 
</div> 
<div class="flippable" id="flip3"> 
    FLIP 3<br /> 
    FLIP 3<br /> 
    FLIP 3<br /> 
    FLIP 3<br /> 
</div> 
<div class="flippable" id="flip4"> 
    FLIP 4<br /> 
    FLIP 4<br /> 
    FLIP 4<br /> 
    FLIP 4<br /> 
</div> 
<script> 
$(document).ready(function() { 
    flip_flippables(); 
    setInterval(flip_flippables, $('.flippable').length*2000); 
    function flip_flippables(){ 
    $('.flippable').each(function(index) { 
     setTimeout(function(thisObj) { thisObj.addClass("flippedforward"); }, index*2000, $(this)); 
     $(this).removeClass("flippedforward"); 
    }); 
    } 
}); 
</script> 

CSS의이었다 :

.flippable { 
    -webkit-transform: rotateX(-90deg); 
    color: blue; 
    font-family: Helvetica,Arial,sans-serif; 
    font-weight: bold; 
    padding: 20px; 
    position: absolute; 
} 

.flippedforward { 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-name: flip; 
    -webkit-transform: rotateX(90deg); 
} 

@-webkit-keyframes flip { 
    0% { -webkit-transform: rotateX(-90deg); } 
    25% { -webkit-transform: rotateX(0deg); } 
    75% { -webkit-transform: rotateX(0deg); } 
    100% { -webkit-transform: rotateX(90deg); } 
}