The goal of this library is to provide a customizable interface to flip HTML elements while obfuscating the need for JavaScript. Customizations are done through HTML and CSS.
http://codenameyau.github.io/flip.js/
bower install flip.js --save
Copy the files in build to your assets folder.
Then add the following resources to your HTML.
<link rel="stylesheet" href="flip.min.css">
<script src="flip.min.js"></script>
Please see the example here.
<!-- Blank Flip Card -->
<div class="flip" data-flip="left">
<div class="flip-body">
<div class="flip-front">
<h1 class="card-header">Front</h1>
</div>
<div class="flip-back">
<h1 class="card-header">Back</h1>
</div>
</div>
</div>
Styling your cards is as simple as adding and overriding your own css rules.
Change the data-flip
attribute to control the flip direction:
data-flip="left"
data-flip="right"
data-flip="up"
data-flip="down"
Welcome! Some future goals for this library include adding click event support and mobile support. There are a few opened issues under the Alpha Release milestone.
Please work with the example in public/
and leave src/
and build/
untouched.
Those two directories are autogenerated with gulp.