Question

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

有问题的效果如'RATATOUILLE'，'LASSITUDE'，'MURMUROUS'，PALIMPSEST'和＆amp;页面上的“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。如果您需要进一步说明，请询问Field

CSS 3D Box旋转

1 个答案: