如何在计时器上调用 3D 翻转效果答案

【问题标题】：How to invoke a 3D Flip effect on a timer如何在计时器上调用 3D 翻转效果
【发布时间】：2013-11-05 13:28:27
【问题描述】：

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

这是我正在使用的 JSFiddle：

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

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

});

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

【问题讨论】：

您的方法是正确的，您必须构造 CSS 以匹配它。而且我认为您不能轻松地翻转表格的各个行，您必须添加一些 HTML 元素最有可能包围每一行（以便仅翻转行而不是整个表格）跨度>

标签： jquery css timer flip

【解决方案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 秒发生）

【讨论】：

【解决方案2】：

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

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

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

【讨论】：