CSS 3D框旋轉

我想創建一個看起來像一個盒子的div，然後它會自動旋轉以顯示其中的不同文本。CSS 3D框旋轉

有問題的效果如圖所示的「料理鼠王」，「精神不振」，「竊竊私語」，重寫本」 &‘集結號’的頁面上的按鈕： 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/

任何幫助將不勝感激，這將幫助我停止在每個面板顯示雙重旋轉。

感謝

來源

2015-06-21 rand0m

我修改你的小提琴（相當嚴重）給你N個邊的圖形一般情況下（在我的例子是5）：fiddle。如果您需要進一步解釋，請詢問.

來源

2015-06-21 13:08:35

Hi Radu，感謝您的解決方案。我開始做一個Nsided動畫，但沿着路線迷路了。從代碼中我可以看到，每個div初始時已經處於-90度，並且當添加正常時，它會移動到0deg，這是要翻轉的動畫;當頂部添加時，它進一步旋轉90度？我不知道它是如何工作的，但確實如此。感謝您的回答，簡單而精彩！ – rand0m

@ rand0m是的，你理解得很好 - 有3個階段：-90,0,90（除了最初的層，只有兩個0,90）。這種安排背後的想法是，我不知道你是否想將它用於一個立方體，或者類似於多層圖層的東西，你想模仿一個立方體旋轉。我希望它對你有所幫助。 –

CSS 3D框旋轉

回答

相關問題