CSS3アニメーション：rotateXで2つ以上のdivをフリップ

Question

私は現在、次のHTMLとCSSを使用して、2つのdivの内容の間にフリップする効果を作り出しています。

どのようにして4つ（またはそれ以上）のdivに切り替えることができますか？

私はこれらのアプローチのいずれかが前進の方法かもしれないと考えていましたが、私はそれらを実装する方法がわかりません！

• アニメーションをrotateX(90deg)で一時停止してから、2番目のアニメーションセットを開始します。
• のいずれかの場合は、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

私には、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); } 
}