CSS 3D Card Flipping Animation on Hover & Click – Flip.js

The Flip.js is a lightweight jQuery plugin to easily create 3D card flipping animation on hover or click. It allows flipping the image or content box to show text backside of an element. It is responsive and works well on all kind of devices.

The flip box has a lot of options which include to flip vertical, horizontal, reverse or rotate it on different axes. The plugins give you the option to set different animation. You can trigger it on click or hover.

The flip.js gives you the ability to produce flip on background images or DIV to show content on the back side of the element.

How to Make Flipp Animation For Card

Simply add both jQuery and flip.js file in the header of your web document.

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

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();