CSS3 动画：rotateX 翻转两个以上的 div答案

【问题标题】：CSS3 animation: rotateX to flip more than two divsCSS3 动画：rotateX 翻转两个以上的 div
【发布时间】：2012-03-31 01:12:38
【问题描述】：

我目前有以下 HTML 和 CSS，它们创建了在两个 div 的内容之间翻转的效果。

我如何扩展它以在 4 个（或更多）div 之间翻转？

我在想这两种方法中的任何一种都可能是前进的方向，但我不确定如何实施它们！

在rotateX(90deg) 处暂停动画，然后开始第二组动画；
或更改位于rotateX(90deg) 的div 的内容。

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

【问题讨论】：

标签： html animation transform css-transitions flip

【解决方案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); }
}

【讨论】：