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

Question

我喜欢这个翻转代码，因为它在翻转动画期间甚至保留了 HTML 表格的视角，而且它是纯 CSS3。我只是想知道您将如何在计时器上而不是在悬停时实现这种翻转。

这是我正在使用的 JSFiddle:

FLIP ON TIMER - 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;
}

结果是this (悬停时延迟转换；将在 2 次悬停后 2 秒发生)