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

最后是一个 class，可以翻转立方体 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 class 并重命名了子项 div classes，翻盖会恢复到初始位置，然后旋转到它的位置新的位置。这是一个 link，其中托管了我的问题的工作副本：http://jsfiddle.net/fatgamer85/m71osbLt/4/

如果能帮助我停止每个面板显示的双重旋转，我们将不胜感激。

谢谢

Answer 1

我修改了你的 fiddle（相当大），为你提供 N 边形的一般情况（在我的例子中是 5）：fiddle。如果您需要进一步的解释，请询问.

CSS 3D 方框旋转

CSS 3D Box rotation

javascript

css

jquery

css-transforms