jQuery Plugin To Rotate An Element with 3D Flip Effects - Flipper
File Size: | 14.4 KB |
---|---|
Views Total: | 13629 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another jQuery & jQuery UI based flipper plugin which allows you to rotate an Html element using CSS3 3D transforms.
See also:
- Flip An Html Element with jQuery and CSS3 - Flipper
- jQuery Plugin To Flip Images Using CSS3 Animations
How to use it:
1. Load the jQuery flipper plugin's stylesheet in the head section.
<link rel="stylesheet" href="path/to/flipper.min.css">
2. Load the jQuery flipper plugin's script after jQuery library and jQuery UI at the bottom of the page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> <script src="path/to/jquery.flipper.js"></script>
3. Create a flipper with front and back content.
<section id="myFlipper"> <div id="flipper-inside"> <div class="front"> <section class="front__content"> Front content goes here </section> </div> <div class="back"> <section class="back__content">Back content goes here </section> </div> </div> </section>
4. Enable the flipper by calling the plugin like this:
$('#myFlipper').flipper();
5. Optional settings to customize the 3D flip effect.
// the type of rotation applied to the element // (left, right, up, down, left-slide, right-slide) rotationType: 'left', // the css perspective applied to the container of the rotating element depth: 1000, // the speed of the rotation speed: 0.5, // the event to listen for hover, click/touch, or keyCode {keyCode: 32} eventListener: 'hover'
Change logs:
2016-09-02
- refactor(project): cleanups
2015-05-19
- v1.1.1
2014-12-30
- v1.1.0
- added event bindings.
This awesome jQuery plugin is developed by cameronroe. For more Advanced Usages, please check the demo page or visit the official website.