Creating 3D Flip Animations with jQuery and CSS3 - Flip.js

Flip.js is a lightweight jQuery plugin that applies 3D flip animations to DOM elements using CSS3 and a little jQuery magic.

Features:

• Triggered by mouse hover, click, touch tap.
• Supports dynamical height & width.
• Auto resizes flippable elements to fit container.
• Custom animation speed.
• Ability to change axis arbitrarily.
• Custom front/back face selectors.
• A callback that fires when flip animation is finished.

How to use it:

1. Import the jQuery flip.js plugin after you have jQuery installed.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/flip.js"></script>

2. Create a flippable card with front / back content.

<div class="demo">
  <div class="front">
      Front content
  </div>
  <div class="back">
      Back content
  </div>
</div>

3. Enable the 3D flip animation on the card.

// $.flip(OPTIONS, CALLBACK);
$("#demo").flip();

4. Possible plugin options.

// The axis that you want to rotate around
// "x" or "y"
axis: "y",

// Reverse the direction of the flip
reverse: false,

// click, hover or manual
trigger: "click",

// animation speed
speed: 500,

// force the height to the width of the container
forceHeight: false,

// force the width to the width of the container
forceWidth: false,

// autoresize front / back panels to fit the container
autoSize: true,

// The selector that flip will use to find the front face of the flippable content. 
// [selector], auto, or autostrict
front: 'auto',

// The selector that flip will use to find the back face of the flippable content.
// [selector], auto, or autostrict
back: 'auto'

5. Public methods.

// flip to the back
$("#demo").flip(true);

// flip back to the front
$("#demo").flip(false);

// Toggle front and back
$("#demo").flip('toggle');

// Change the axis orientation on the fly:
$("#demo").flip({axis: 'x'});

Change logs:

v1.1.2 (2016-10-20)

• update

v1.0.20 (2016-02-14)

• Add '.flip' namespace to all flip events

v1.0.9 (2016-01-08)

• Add '.flip' namespace to all flip events

v1.0.8 (2015-11-13)

• Fixed Missing comma in package.json

v1.0.7 (2015-09-18)

• bugfixes

v1.0.6 (2015-08-09)

• Made Flip Idempotent, meaning it won't hurt if you call it more than once on the same element. 
• Fixes Not working after ajax.
• Fixed a rendering glitch in Chrome and Opera. 

2015-07-24

• Hide backface for all childrn

2015-07-19

• Fixed event not triggering on some flips

2015-07-16

• Added ability to change 'reverse' dynamically

---

This awesome jQuery plugin is developed by nnattawat. For more Advanced Usages, please check the demo page or visit the official website.