jQuery/Javascript/HTML transform div into another with animation

Question

I am working on something that might require a bit of animation in html/css or some jQuery or such. The essence of the question lies in alternating one div with another (both located in the same area on the website) constantly...perhaps in ten second intervals. This fiddle here:

http://jsfiddle.net/arunpjohny/asTBL/

the html is here:

<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>

and javascript is here:

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)

})

basically covers the alternating divs every x amount of seconds. The main issue I have is the animation/transformation part of it. Maybe using the fiddle's elements and layout, how would one make the divs alternate in a revolving door style animation. Where the first div revolves into the page essentially and the other side of that revolving door is the new page? And it does this every 10 seconds or so? I researched and maybe html2canvas is the way to go but I am unsure I could grasp that content. Any help?

UPDATE:

I'm an extreme newbie to coding. I found this wonderful site

http://davidwalsh.name/css-flip

that has the flip effect I'm looking for. Is there a way to use this with jQuery to make this effect occur every ten seconds on some div? Instead of the effect occurring everytime one moves the mouse over it?

Answer 1

The whole thing can be done just with CSS animations and 3D transforms, which give you functions to rotate things round an axis, and to do that continuously at regular frequencies.

For the continuous animation part of it, see an article at 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/ (it needs a recent version of IE to see it in action, but works on all the other browsers fine). And you already have the reference you quoted to tell you how to rotate things.

You just have to combine the rotations with the continuous animating to get what you want.