The flipper.js give a way to create card flip animation. The plugin builds with Jquery and CSS3 animation. It has the option to make the flipping card work on click or on hover. It also provides different rotation Type and you can set whether it rotate left, right, up and down.
It comes with the option to handle the depth and speed by setting the parameter. The plugin work with images and text. It works with DIV element and when the user hovers or click the element, they can see the content of the back side of a DIV.
It allows adding the text, photo or video on both sides of the element. It is the best way to present the content boxes to your site visitor. It helps you to save the space of the webpage.
Hot to Create Flipping Card Animation
You need to add the following of three files in the head.
<script src="http://code.jquery.com/jquery.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> <script src="dist/jquery.flipper.min.js"></script>
The next we need to define the HTML. We have defined the section HTML5 element but you can also use the DIV, it doesn’t matter. Only to make sure to add the section ID and in our case, we have defined Flipper.
Then we will have two child divs, one for front view and the second one on the back side.
<section id="Flipper"> <!-- There should be two elements inside the flipper --> <section class="front"></section> <section class="back"></section> </section>
Finally, initial the function by adding the ID.
<script>
$('#Flipper').flipper({
rotationType: 'left-slide',
depth: 1000,
speed: 0.2
});
</script>How to Make CSS Flip Card On Hover
If you want to make the flipping box work on hover, you simply need to add the event and set its value to click. Let’s have a look at the function.
<script>
$('#Flipper').flipper({
rotationType: 'right-slide',
event: 'click',
depth: 2000,
speed: 0.1
});
</script>