jquery - 如何在计时器上调用 3D 翻转效果

Question

我喜欢这个翻转代码，因为它在翻转动画期间保持 HTML 表格的透视，而且它是纯 CSS3。我只是想知道您将如何在计时器上而不是悬停上进行此翻转。

这是我正在使用的 JSFiddle：

翻转定时器 - JSFIDDLE

它应该是一个 3 或 4 秒的计时器，并且会发生在多个 div 上，因此可以使用以下代码：

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

});

我非常想知道您认为最好的方法是什么。谢谢

Answer 1

很可能这不是您想要的，但让我们尝试一下 :-) 我补充说：

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

结果是这样的（悬停时的延迟过渡；将在 2 次悬停后 2 秒发生）

Answer 2

感谢您的回答，我最终选择了这个：

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

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