如何在計時器上調用3D翻轉效果

我喜歡此翻轉代碼，因爲它在翻轉動畫期間保留了偶數HTML表格的視角，並且它是純粹的CSS3。我只是想知道如何在計時器上做這個翻轉而不是懸停。如何在計時器上調用3D翻轉效果

這裏是的jsfiddle我的工作：

這應該是一個3或4秒計時器和將發生在多個div因此可能被用來驗證碼：

$('.row').each(function(i){ 
    var row = $(this); 
    setTimeout(function() { 
      row.toggleClass('flip', !row.hasClass('flip')); 
     }, 1500*i); 

});

我非常想知道你覺得這是最好的方法。由於

來源

2013-10-12 mm-93

你的方法是正確的，你必須構造CSS來匹配它。而且我不認爲你可以輕鬆地翻轉表格中的單個行，你必須添加一些HTML元素來包含每行最有可能的行（這樣只有行可以翻轉，而不是整個表） –

最可能的是，這不是你想要的，但讓我們做一個嘗試:-) 我補充說：

flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper { 
    -webkit-transition: -webkit-transform 1s 2s; 
    transition: transform 1s 2s; 
}

，其結果是this（懸停延遲過渡; 2後會發生2秒懸停）

來源

2013-10-13 08:19:15 vals

謝謝您的回答，我結束了這是怎麼回事：

-webkit-transform: rotateY(180deg); 
-moz-transform: rotateY(180deg); 
transform: rotateY(180deg);

http://jsfiddle.net/xpancom/wG299/9/

來源

2013-11-05 05:28:27

如何在計時器上調用3D翻轉效果

回答

相關問題