CSS3 анимация: rotateX, чтобы перевернуть более двух дел - PullRequest
Новая
       24

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

0 голосов
/ 14 марта 2012

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

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

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

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

1 Ответ

0 голосов
/ 15 марта 2012

Я получил там в конце с легким 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); }
}
...