jQuery Mobile - applying transition effects for individual dom elements

I'm looking to accomplish something like this using jQuery Mobile (and ideally, no additional plugins): http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/demo.php

I can make it work with only one element using pages and "data-rel=dialog".. but it gets quite complicated with multiple items.

I was wondering if there is a way 开发者_JAVA技巧to just call the "flip" transition without using the data-role=page attribute. In other words, just flip any ordinary div.

Is something like this possible?

So you just want an element on one of your pages that you can flip like the individual logos on the flip wall? You absolutely can do that. Those (presuming here, since I haven't looked at it in detail) are CSS animations. They aren't supported in all browsers though (primarily just webkit-based ones, but that's your major mobile, Mac and enthusiast PC crowd).

Check out this article from The Art of Web:

http://www.the-art-of-web.com/css/3d-transforms/

That should get you on the road to where you want to be.

To add the flip animation to an element, just add the flip class to it. You can apply any effect to any element, take a look at the css file for more effects.

$(element).addClass("flip"); // to flip it
$(element).removeClass("flip"); // after the animation is complete