CSS 3D框旋转

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的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后停止。

旋转和启示如预期的那样occour，但由于删除flipNow类和重命名的儿童div类，翻转回到初始位置，然后旋转到新的位置。这是一个链接，我的问题的工作副本正在主持：http://jsfiddle.net/fatgamer85/m71osbLt/4/

任何帮助将不胜感激，这将帮助我停止在每个面板显示双重旋转。

感谢

Answer 1

我修改你的小提琴（相当严重）给你N个边的图形一般情况下（在我的例子是5）：fiddle。如果您需要进一步解释，请询问.