Creating 3D Flip Animations with jQuery and CSS3 - Flip.js
File Size: | 21 KB |
---|---|
Views Total: | 23915 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Flip.js is a lightweight jQuery plugin that applies 3D flip animations to DOM elements using CSS3 and a little jQuery magic.
Features:
- Triggered by mouse hover, click, touch tap.
- Supports dynamical height & width.
- Auto resizes flippable elements to fit container.
- Custom animation speed.
- Ability to change axis arbitrarily.
- Custom front/back face selectors.
- A callback that fires when flip animation is finished.
How to use it:
1. Import the jQuery flip.js plugin after you have jQuery installed.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="src/flip.js"></script>
2. Create a flippable card with front / back content.
<div class="demo"> <div class="front"> Front content </div> <div class="back"> Back content </div> </div>
3. Enable the 3D flip animation on the card.
// $.flip(OPTIONS, CALLBACK); $("#demo").flip();
4. Possible plugin options.
// The axis that you want to rotate around // "x" or "y" axis: "y", // Reverse the direction of the flip reverse: false, // click, hover or manual trigger: "click", // animation speed speed: 500, // force the height to the width of the container forceHeight: false, // force the width to the width of the container forceWidth: false, // autoresize front / back panels to fit the container autoSize: true, // The selector that flip will use to find the front face of the flippable content. // [selector], auto, or autostrict front: 'auto', // The selector that flip will use to find the back face of the flippable content. // [selector], auto, or autostrict back: 'auto'
5. Public methods.
// flip to the back $("#demo").flip(true); // flip back to the front $("#demo").flip(false); // Toggle front and back $("#demo").flip('toggle'); // Change the axis orientation on the fly: $("#demo").flip({axis: 'x'});
Change logs:
v1.1.2 (2016-10-20)
- update
v1.0.20 (2016-02-14)
- Add '.flip' namespace to all flip events
v1.0.9 (2016-01-08)
- Add '.flip' namespace to all flip events
v1.0.8 (2015-11-13)
- Fixed Missing comma in package.json
v1.0.7 (2015-09-18)
- bugfixes
v1.0.6 (2015-08-09)
- Made Flip Idempotent, meaning it won't hurt if you call it more than once on the same element.
- Fixes Not working after ajax.
- Fixed a rendering glitch in Chrome and Opera.
2015-07-24
- Hide backface for all childrn
2015-07-19
- Fixed event not triggering on some flips
2015-07-16
- Added ability to change 'reverse' dynamically
This awesome jQuery plugin is developed by nnattawat. For more Advanced Usages, please check the demo page or visit the official website.