jQuery/Javascript/HTML 将 div 转换为另一个动画

Question

我正在做一些可能需要 html/css 或 jQuery 之类的动画的事情。问题的本质在于不断交替一个 div 与另一个（都位于网站上的同一区域）......也许以十秒为间隔。这里fiddle：

html 在这里：

<div id="quote1">
<span class="quote">I am a quote</span>
<span class="author">Author Name</span>
</div>

<div id="quote2">I am another quote</div>

<div id="quote3">I am yet another quote</div>

和javascript在这里：

jQuery(function () {
var $els = $('div[id^=quote]'),
    i = 0,
    len = $els.length;

$els.slice(1).hide();
setInterval(function () {
    $els.eq(i).fadeOut(function () {
        i = (i + 1) % len
        $els.eq(i).fadeIn();
    })
}, 2500)

})

基本上每隔 x 秒覆盖交替的 divs。我遇到的主要问题是它的 animation/transformation 部分。也许使用 fiddle 的元素和布局，如何使 div 在旋转门风格的动画中交替出现。第一个 div 基本上旋转到页面，而旋转门的另一边是新页面？它每 10 秒左右执行一次？我进行了研究，也许 html2canvas 是可行的方法，但我不确定我能否掌握该内容。有帮助吗？

更新：

我是编码的新手。我找到了这个很棒的网站

http://davidwalsh.name/css-flip

具有我正在寻找的翻转效果。有没有办法将它与 jQuery 一起使用，使这种效果在某些 div 上每十秒发生一次？而不是每次将鼠标移到它上面时出现的效果？

Answer 1

只需使用 CSS 动画和 3D 变换即可完成整个事情，它们使您能够绕轴旋转物体，并以固定频率连续旋转。

对于它的连续动画部分，请参阅 http://css-tricks.com/almanac/properties/t/transition/. For a demo of what can be achieved see a small continuously rotating display I put on one of my own sites at http://www.dataprotectioncourse.co.uk/ 上的一篇文章（它需要最新版本的 IE 才能看到它的实际效果，但在所有其他浏览器上都可以正常工作）。你已经有了你引用的参考来告诉你如何旋转东西。

您只需将旋转与连续动画相结合即可获得所需内容。

jQuery/Javascript/HTML 将 div 转换为另一个动画

jQuery/Javascript/HTML transform div into another with animation

javascript

jquery

animation

canvas

html2canvas