Alright, first of all this is not a real image flip but sort of an illusion, the image does not flip itself in 3D since jQuery does not provide us with an image rotation or a distort feature for HTML elements. I know their are some image rotation plug-ins out their but they don’t work out very well with animate method of jQuery.


To achieve the Horizontal flip we are basically reducing the width of the first image to 0 pixels, increasing the left side margin from zero to half it’s width and as soon as we finish that, Increase the width of the second image from zero to it’s actual width and do the opposite for left side margin what we did for the first image i.e reduce it from half the width of the image to zero.
Create An Image Flip Using jQuery Web Site
Create An Image Flip Using jQuery Demo
Create An Image Flip Using jQuery Download

Share and Enjoy:
  • Print this article!
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>