🤯 50% Off! 700+ courses, assessments, and books

10 jQuery Flip Effect Plugins

Sam Deering
Share

This collection of 10 jQuery Flip Effect plugins make the HTML content and images flip 360 degree and animate them with jQuery and CSS3 transform and rotate. You will probably find these most useful for your portfolio. Enjoy!

Related Posts:

Premium – Responsive Flip Book powered by jQuery

It is fully HTML & jQuery driven no Flash Player needed. Works on desktop and mobile devices!

1. Portfolio Flipping Slider Using jQuery & CSS3

The slider will change our portfolio images when it’s flipping, this flipping effect is triggered by user click on the pagination. So when user click a page each of our portfolio images will flipping 360 degree and when its animation near end the image will changed with new image.
Portfolio Flipping Slider
SourceDemo

2. flipCounter : jQuery Counter Plugin

A jQuery plugin that turns a boring ‘ole number into a big, beautiful analogue display. Count down the days until the apocalypse, make your own debt clock or throw back to the 90s and resurrect the hit-counter.
flipCounter
Source + Demo

3. Image Flip Using jQuery

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 there are some image rotation plug-ins out their but they don’t work out very well with animate method of jQuery.
Image Flip
SourceDemo

4. Flippy : Flip effect jQuery Plugin

A cross-browser flip effect plugin for jQuery which allows you to flip whatever html element you want.
Flippy
Source + Demo

5. Create CSS 3D Transform Card Flip Gallery with jQuery

We are going to apply card flip effect to a set of thumbnail gallery. We just want to demonstrate one of the simple ways to use it. One thing though, CSS 3D transform is not a mature standard yet and only modern browsers are supporting it.
CSS 3D Transform Card Flip
SourceDemo

6. QuickFlip 2: The jQuery Flipping Plugin

QuickFlip works by using an animation shortcut that is barely noticeable when flipped quickly (hence the name). This shortcut improves performance while allowing the flip effect to work smoothly with any piece of markup regardless of images, backgrounds or CSS.
QuickFlip 2
Source + Demo

7. Rotate3Di – Flip HTML content in 3D with jQuery

A jQuery Effect Plugin that makes it possible to do an isometric 3D flip or 3D rotation of any HTML content. It also enables custom 3D rotation animations.
Rotate3Di
Source + Demo

8. Sponsor Flip Wall With jQuery & CSS

We are using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. The resulting code can be used to showcase your sponsors, clients or portfolio projects as well.
Sponsor Flip Wall
SourceDemo

9. Flip! jQuery Plugin

A jQuery plugin that will flip easily your elements in four directions.
Flip!
Source + Demo

10. jQuery Flip Clock Countdown Timer

This sleek flip clock timer makes for an elegant way to countdown to events.
jQuery Flip Clock Countdown Timer
Source + Demo