CSS3 анимация: rotateX перевернуть более двух divs

Question

В настоящее время у меня есть следующий HTML и CSS, который создает эффект перелистывания между содержимым двух div.

Как я могу расширить это, чтобы перевернуть между 4 (или более) divs?

Я думал, что любой из этих подходов может быть в будущем, но я не уверен, как их реализовать!

• приостановить анимацию в rotateX(90deg), затем запустить второй набор анимаций;
• или изменить содержимое разделов, если они находятся на 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

Я получил там в конце концов с налетом JavaScript.

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