CSS 3D Box rotation

Question

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

эффект в вопросе, как показано в «Рататуй», «вялость», кнопки «журчащий», палимпсест»&„Сборки“на странице: http://tympanus.net/Development/CreativeLinkEffects/

я использовать код из предыдущего проект написан кем-то другим (автор неизвестен).

У меня есть куб DIV, с 4-мя панелями в нем, и первые 2 панели отмечены начальную панель и следующую панель

<div class="cube flip-to-bottom"> 
    <div class="initialpanel"><span>1st Panel</span></div> 
    <div class="nextpanel"><span>2nd Panel</span></div> 
    <div><span>3rd Panel</span></div> 
    <div><span>4th Panel</span></div> 
</div> 

как стилизованную

.initialpanel { 
    -webkit-transform: translateZ(25px); 
    -moz-transform: translateZ(25px); 
    -o-transform: translateZ(25px); 
    -ms-transform: translateZ(25px); 
    transform: translateZ(25px); 
} 

.nextpanel { 
    -webkit-transform: rotateX(-90deg) translateZ(-25px); 
    -moz-transform: rotateX(-90deg) translateZ(-25px); 
    -o-transform: rotateX(-90deg) translateZ(-25px); 
    -ms-transform: rotateX(-90deg) translateZ(-25px); 
    transform: rotateX(-90deg) translateZ(-25px); 
} 

и, наконец, класс, который позволяет переворачивать на куб div

.flipNow { 
    -webkit-transform: rotateX(89deg); 
    -moz-transform: rotateX(89deg); 
    -o-transform: rotateX(89deg); 
    -ms-transform: rotateX(89deg); 
    transform: rotateX(89deg); 
} 

Связывание этих двух вместе - это мой javascript, который будет проходить через куб e's children div, переименование каждой итерации для анимации с использованием CSS.

function startRotating(currentIndex) { 
    current = $(".cube >div.initialpanel"); 
    nextCurrent = current.next(); 
    next = $(".cube >div.nextpanel"); 
    nextNext = next.next(); 

    var flipNow = setTimeout(function(){ 
     $(".cube").addClass("flipNow"); 
    }, 2000); 

    var stopFlip = setTimeout(function(){ 
     $(".cube").removeClass("flipNow"); 
     current.removeClass("initialpanel"); 
     next.addClass("initialpanel"); 
     next.removeClass("nextpanel"); 
     nextNext.addClass("nextpanel"); 
    }, 3000); 

    setTimeout(function(){ 
     if(nextNext.length ===1){ 
      startRotating($("div.initialpanel")); 
     } 
    },4000); 
} 

Этот код должен повернуть панель 1 и шоу-панель 2, и вращать панель 2 и показать панель 3, и вращать панель 3 и показать панель 4 и остановки после того, как панель 4, как нет больше панелей.

Вращение и откровения происходят так, как ожидалось, но из-за удаления класса flipNow и переименования дочерних классов div флип возвращается в исходное положение и затем поворачивается в новое положение. Это ссылка, в которой находится рабочая копия моей проблемы: http://jsfiddle.net/fatgamer85/m71osbLt/4/

Любая помощь будет оценена, которая поможет мне остановить двойное вращение на каждой панели.

Благодаря

Answer 1

Я изменил вашу скрипку (довольно тяжело), ​​чтобы дать вам общий случай для N встало фигуры (в моем примере это 5): fiddle. Если вам нужно дополнительное объяснение, спросите .