Touch-enabled 3D Flipping Animations - Flip Box

Flip Box is a jQuery plugin to create a responsive, mobile-friendly flip card that enables you to reveal the back content by hovering/swiping on the front content, with CSS3 based 3D flipping animations.

The plugin automatically calculates the height of front and back content and make them have the same height (equal height) using CSS flexbox.

How to use it:

1. Link to JQuery JavaScript library and the Flip Box plugin's files.

<link href="/path/to/dist/flip-box.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/flip-box.js"></script>

2. Add front and back content to the flip box following the HTML structure like these:

<div class="bod-flip-box">
  <div class="flip-inner">
    <div class="flip-front">
      <div class="flip-front-content">
        Front Content
     </div>
    </div>
    <div class="flip-back">
      <div class="flip-back-content">
        Back Content
      </div>
    </div>
  </div>
</div>

3. Insert an image as the background for the front content.

<div class="bod-flip-box">
  <div class="flip-inner">
    <div class="flip-front">
      <img class="flip-front-image" src="bg.jpg" alt="">
      <div class="flip-front-content fbg-overlay">
        Front Content As An Overlay
     </div>
    </div>
    <div class="flip-back">
      <div class="flip-back-content">
        Back Content
      </div>
    </div>
  </div>
</div>"

4. To enable the equal height function, just wrap the flip box into a container with the display:flex property.

<div style="display:flex;">
  <div class="bod-flip-box">
    ...
  </div>
</div>

5. Apply additional flipping animations to the flip box. Possible animations:

<div class="bod-flip-box slide-flip">
  ...
</div>

<div class="bod-flip-box up-flip">
  ...
</div>

<div class="bod-flip-box down-flip">
  ...
</div>

<div class="bod-flip-box lift-flip">
  ...
</div>

<div class="bod-flip-box diag-flip">
  ...
</div>

<div class="bod-flip-box diag-inv-flip">
  ...
</div>

Changelog:

2020-02-15

• Add diagonal flip

---

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