CSS 3D 框旋转

Question

我正在尝试创建一个看起来像一个盒子的 div，然后它会自动旋转以在其中显示不同的文本。

有问题的效果如页面上的“RATATOUILLE”、“LASSITUDE”、“MURMUROUS”、“PALIMPSEST”和“ASSEMBLAGE”按钮所示： 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，它将遍历立方体的子 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。如需进一步解释，请询问.