

Sep 04, 2014 in Animation 3607 views
jQuery Flipper is a simple way to add a CSS3 flip effect to your content.
Source: github.com
1. INCLUDE JS FILES
<script src="//code.jquery.com/jquery.js"></script> <script src="jquery.flipper.min.js"></script>
2. HTML
<section id="myFlipper"> <!-- You must add the id "flipper-inside" inside your flipper container. --> <div id="flipper-inside"> <!-- There should be two elements in the #flipper-inside. They can have any class or id you choose. --> <section class="front"></section> <section class="back"></section> </div> </section>
3. JAVASCRIPT
$('#myFlipper').flipper({ rotationType: 'left-slide', depth: 1000, speed: 0.2 });
4. OPTIONS
You can also pass flipper options.
rotationType [string] the type of rotation (left, right, up, down, left-slide, right-slide)
depth [number] the perspective applied to the element rotation (100 - 1000)
speed [number] the speed of the rotation (0.1 - 2.0)
Tagged with: jquery flipper css3 flip flip effect flipper rotation css3