jQuery Plugin To Flip Images Using CSS3 Animations - Flipper

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:

• Flip An Html Element with jQuery and CSS3 - Flipper

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.