回転アニメーション付き3D多面バナー

Question

いつも知恵をお貸しくださって有り難うございます！

今回は「cssでアニメーションする多面バナー」の実装を試みています
▼テスト中の現状URL▼
http://strike.moo.jp/test.html

上記URLを見ていただくと、４色(４面)の画像がrotateXでくるくる縦に回転していると思います

これを、
●各面３秒ごと停止させたい●

というのが実現させたい内容なのですが、出来ておりません
もしかしたら一面ごとにアニメーションを指定すればできるのかな？と漠然と思っているのですが
書き方がわからずリサーチ中です

<div class="css-cube">
<div class="css-face css-forward"><a href="#"><img src="1.jpg" alt="1"></a></div>
<div class="css-face css-reverse"><a href="#"><img src="2.jpg" alt="2"></a></div>
<div class="css-face css-top"><a href="#"><img src="3.jpg" alt="3"></a></div>
<div class="css-face css-bottom"><a href="#"><img src="4.jpg" alt="4"></a></div>
</div>

/*ローテートXループバナーテスト*/

.css-cube {                                      /* 立体の大きさ傾きの指定 */
  width: 550px;
  height: 100px;
  margin: 5%;
  transform-style: preserve-3d;                  /* ３Ｄで表示 */
  display : inline-block;
  animation: cubeAnime 5s 3s cubic-bezier(0,0,0,1) infinite;       /* 動きの指定 */
}

@keyframes cubeAnime{                            /* 回転方向の指定 */
    0% { transform: rotateX(0deg) ;}
   30% { transform: rotateX(90deg) ;}
   55% { transform: rotateX(180deg) ;}
   75% { transform: rotateX(270deg) ;}
  100% { transform: rotateX(360deg) ;}
}

.css-face {                                      /* 各面の指定 */
  position: absolute;
  width: 550px;
  height: 150px;
}


.css-forward {                                   /* 前面の指定 */
  transform: translateZ(75px);
}
.css-reverse {                                   /* 後面の指定 */
  transform: rotateY(180deg) translateZ(75px);
}

.css-top {                                       /* 上面の指定 */
  transform: rotateX(90deg) translateZ(75px);
}
.css-bottom {                                    /* 下面の指定 */
  transform: rotateX(-90deg) translateZ(75px);
}

以下やってみたこと

animation: cubeAnime 5s 3s cubic-bezier(0,0,0,1) infinite;

上記アニメーションの設定で「3s」の追加やcubic-bezierなどは調べてやってみたことです
最初の１面に一回きりしか適用になっておらず他の記述を模索しています

ご覧になってる方のお手間にならない範囲で構いませんので、ヒントだけでも頂けると非常に助かります！
何卒宜しくお願い致します

Answer 1

ご自身で試されているとの事ですので
とりあえずヒントを^^;

+++++++++++++++++++++++++++++++++

3Dの回転を作る場合、

▼ 立体各面の配置方法によって多少変わりますが基本的に

1. 子要素に「rotateX」と「translateY」「translateX」を使って四角の立体を作る

2. 親要素が回転軸になるように、子要素にtranslateZをかけ、立体の中央を親要素(平面)が横切るようにする

▼ 立体と回転軸が出来てから

1. 親要素にアニメーション設定 ( 回転させるのは親要素だけです^^ )

2. 希望のタイミングで回転するようキーフレームを設定

この4つを個別に、順番に処理してみて下さい

ポイント ++++++++++++++++

● 回転させるときは親要素と子要素のサイズを一緒にする
(位置設定までは親が大きい方が分かりやすいので違っていてもOKですが、
サイズが違うと回転軸がずれるのでアニメを実装する段階で統一させます)

● キーフレームはcubic-bezierを使わなくても、animation-play-state の pausedとrunningを組み合わせれば1面づつ止める表現も可能

+++++++++++++++++++++++++++++++++

こんな感じでしょうか^^