CSS3 animation: rotateX to flip more than two divs - html

Question

I currently have the following HTML and CSS which creates the effect of flipping between the content of two divs.
How I can expand on this to flip between 4 (or more) divs?
I was thinking either of these approaches might be the way forward but I'm not sure how to implement them!
pause the animations at rotateX(90deg) then start a second set of animations;
or change the content of the divs when they are at 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

I got there in the end with a touch of JavaScript.
The HTML was:
<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>
The CSS was:
.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); }
}