jQuery Plugin To Flip Html Elements with CSS3 - Flip

Yet another jQuery plugin that makes it easy to flip an Html element like a card using CSS3 transition, transform, front and back properties.

How to use it:

1. Include jQuery javascript library and jQuery flip plugin at the bottom of the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.flip.js"></script> 

2. Create the flip front and back elements and them wrap them in a container with class of 'flip'.

<div class="flip">
<div class="flip-front">card</div>
<div class="flip-back">card-back</div>
</div>

3. Call the plugin on the 'flip' container.

<script type="text/javascript">
$(document).ready(function() {
$(".flip").flip();
});
</script>

4. By default, the plugin will flip the Html element on mouse click. You can config it to flip on mouseclick using 'event' option in the javascript.

<script type="text/javascript">
$(document).ready(function() {
$(".flip").flip({ 
event: ["mouseover", "mouseout"] 
});
});
</script>

---

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