Example

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/v1.0.11/dist/jquery.flip.min.js">

Download

• jquery.flip.js (development version, commented ~9Kb)
• jquery.flip.min.js (production version, minified ~4Kb, gzipped ~2Kb)
• jquery.flip.min.js.map (source map, ~5Kb)

<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.

Options

Attribute	Possible value	Default	Description
axis	y, x	y	The axis that you want to rotate around
trigger	click, hover, manual	click	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	Set to true if you want to reverse the direction of the flip.
speed	any integer	500	Duration of the flipping animation in miliseconds. Higher means slower.
front	[selector], auto, autostrict	auto	The selector that flip will use to find the front face of the flippable content. When set to auto, flip will try to find a face using the default selector .front. If it does not find a face that way, it will fall back to using the first child div it finds. When set to autostrict it will not first attempt to use the default selector, but instead always pick the first child div.
back	[selector], auto, autostrict	auto	The selector that flip will use to find the back face of the flippable content. When set to auto, flip will try to find a face using the default selector .back. If it does not find a face that way, it will fall back to using the second child div it finds. When set to autostrict it will not first attempt to use the default selector, but instead always pick the second child div.
autoSize	true, false	true	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	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.
forceHeight	true, false	false	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.

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'});

Examples with corresponding options

Grid style example

Fluid example

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