Create A Simple Flip Effect Using jQuery and CSS3 - M Flip

M Flip is a lightweight jQuery plugin that makes it easy to create the 'flip' effects using CSS3 3D transforms. Great for creating a perspective view or side view for your product image.

Basic usage:

1. Place the style sheet jquery.m.flip.css in the head section of the web page.

<link rel="stylesheet" href="jquery.m.flip.css">

2. Create a 3D flipping box with front / back content.

<div class="box m-flip">
  <div class="front"> Hello I'm the front</div>
  <div class="back"> I'm the back, bye!</div>
</div>

3. You can specify the angle of rotation using data-rotation attribute.

<div class="box m-flip" data-rotation="45">
  <div class="front"> Hello I'm the front</div>
  <div class="back"> I'm the back, bye!</div>
</div>

4. Place jQuery library and the JavaScript file jquery.m.flip.js at the bottom of the web page.

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

5. Call the method mflip() on the box element and done.

$(document).ready(function() {
  $(".box").mflip();
});

---

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