jQuery Plugin To Flip Images Using CSS3 Animations - Flipper
File Size: | 455 KB |
---|---|
Views Total: | 5774 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Flipper is a super tiny jQuery plugin to create image flip effect by rotating the front and back elements using CSS3 transitions and transforms.
See also:
How to use it:
1. Insert the front and back images into your document as follows.
<div class="flip-container"> <div class="flipper"> <div class="front"> <img src="front.jpg"> </div> <div class="back"> <img src="back.jpg"> </div> </div> </div>
2. Include the latest version of jQuery library at the bottom of the document.
<div class="flip-container"> <div class="flipper"> <div class="front"> <img src="front.jpg"> </div> <div class="back"> <img src="back.jpg"> </div> </div> </div>
3. Optionally, you can create a link to active the image flip effect.
<a href="#" onclick="$('.flip-container').flipper()">Flip</a>
4. The required CSS/CSS3 styles.
.flip-container { -webkit-perspective: 1000; -moz-perspective: 1000; perspective: 1000; } .flipper { -webkit-transition: 0.6s; -moz-transition: 0.6s; transition: 0.6s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; } .front, .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0; } .front { z-index: 2; } .back { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .flip-container.flip .flipper { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); }
5. The Javascript to enable the image flip effect.
(function( $ ) { $.fn.flipper = function() { this.filter( ".flip-container" ).each(function() { var jThis = $( this ); var flipper = jThis.children(".flipper"); var widthFront = flipper.children(".front").width(); var widthBack = flipper.children(".back").width(); var width = jThis.hasClass("flip") ? widthFront : widthBack; flipper.width(width); jThis.toggleClass("flip"); }); return this; }; }( jQuery ));
This awesome jQuery plugin is developed by bmwant21. For more Advanced Usages, please check the demo page or visit the official website.