Fork me on GitHub

jQuery Flip v1.1.1

A jQuery plugin to flip content with 3D animation

Star Fork Download

Example

Front
Click to flip me!
Back
Click to flip me back!

How to include

Simply include jquery.flip.js on your page. jQuery Flip has a dependency on jQuery so make sure to include that first.

From CDN

Use both jQuery and jQuery Flip directly from CDN. No need to download anything:

<script src="https://code.jquery.com/jquery-2.1.4.min.js">
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js">

Download

<script src="jquery-2.1.4.min.js">
<script src="jquery.flip.js">

Or install using bower

bower install flip

How to use

In your HTML file, create a <div> with two <div>s inside with class .front and .back:

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

Then, call jQuery flip() on it:

$("#card").flip();

You can specify other selectors instead of .front and .back by setting the options front and back when instantiating flip.

If your setup is simple enough, you can even forgo the selectors entirely without any extra effort:

<div id="card"> 
  <div> 
    Front content
  </div> 
  <div>
    Back content
  </div> 
</div>
CSS guide
For the best layout, margin should be added to .card and padding should be added to .front and .back

.flip()

Attribute Possible value Description
[Options] Object(see below),true, false, 'toggle' If an object, the settings to apply to the flip element. Otherwise, a value representing how the object should be immediately flipped.
[callback] function A function to be called upon the completion of this call to flip.

Options

Attribute Possible value Default Availability Description
axis 'y', 'x' 'y' Always The axis that you want to rotate around
trigger 'click', 'hover', 'manual' 'click' Init only Event that activates the flip action. Using manual means that you have to activate it via javascript. When this is set to click and the tap event is available (through e.g. jQuery Mobile or jQuery Touch Events), flip will bind to that instead of to click as a regular click will also instantaneously trigger a tap event, but not vice-versa. This gets rid of the 300ms click delay on mobile browsers.
reverse true, false false Always Set to true if you want to reverse the direction of the flip.
speed any integer 500 Init only Duration of the flipping animation in miliseconds. Higher means slower.
front [selector], jQuery object '.front' Init only The selector that flip will use to find the front face of the flippable content.
back [selector], jQuery object '.back' Init only The selector that flip will use to find the back face of the flippable content.
autoSize true, false true Init only Whether the front and back panels should be automatically sized to fit the container. Will make flip add styles width:100% and height:100% to them. Works well in fluid containers.
forceWidth true, false false Init only Whether the front and back panels should be forced to the width of the container. Will make flip add style width:xxpx to them (where xx is the container's outerWidth). Does not work well with fluid containers.
NOTE: This option is provided for backward compatibility and should eventually be deprecated. If you are migrating from an older version of Flip and are having issues with the new dynamic sizing feature, you can set forceWidth and forceHeight to true, and autoSize to false to make Flip behave the same as it did before. If you find you need this option, please report it to us as it should not be needed.
forceHeight true, false false Init only Whether the front and back panels should be forced to the height of the container. Will make flip add style height:yypx to them (where yy is the container's outerHeight). Does not work well with fluid containers.
NOTE: This option is provided for backward compatibility and should eventually be deprecated. If you are migrating from an older version of Flip and are having issues with the new dynamic sizing feature, you can set forceWidth and forceHeight to true, and autoSize to false to make Flip behave the same as it did before. If you find you need this option, please report it to us as it should not be needed.

Events

Event Description
flip:done Triggered on the completion of a flip.
flip:change Triggered once flip is done updating the settings of an element.
Note

All jQuery events added by the plugin contain .flip namespace. You can unregister flip by:

$("#card").off(".flip");

You can get API object to change interaction or see states by:

var flip = $("#card").data("flip-model");

// e.g. to see currect flip state
flip.isFlipped;

Using via javascript

You can flip to the back by calling

$("#card").flip(true);

And flip it back to the front by calling

$("#card").flip(false);

Toggle front and back by calling

$("#card").flip('toggle');

Change the axis orientation on the fly:

$("#card").flip({axis: 'x'});

Similarly for reverse:

$("#card").flip({reverse: true});

Examples with corresponding options

Image from www.w8themes.com
$("#card").flip({
  axis: 'x',
  trigger: 'hover'
});

Image from www.autoimagesize.com
$("#card").flip({
  axis: 'x',
  trigger: 'hover',
  reverse: true
});

Image from www.wallko.com
$("#card").flip({
  trigger: 'manual'
});
$("#card").flip(true);
$("#card").flip(false);
$("#card").flip('toggle');

Image from flickr.com/photos/neilspicys/
$("#card").flip({
  axis: 'y',
  trigger: 'click'
});
$("#card").flip({axis: 'x'});
$("#card").flip({axis: 'y'});
$("#card").flip({reverse: true});
$("#card").flip({reverse: false});

Image from pixabay.com/en/lake-macquarie-sunset-water-71208/
$("#card").flip({
  trigger: 'click'
});
$("#card").on('flip:done',function(){
  $(this).doCoolFadingThings();
  //Disclaimer: ^This function is fake :)
});

Image from https://upload.wikimedia.org/wikipedia/commons/f/f6/Bangkok_skytrain_sunset.jpg
$("#card").flip({
  trigger: 'click'
});
$("#card").flip({axis: ...});
//We're just toggling between y and x
$("#card").on('flip:change',function(){
  $('#card').flip('toggle');
});

Grid style example

Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back

Fluid example

Try to resize your browser window. The card in this example will resize with it.

Image from commons.wikimedia.org
user Nevit Dilmen
$("#card").flip();