angular-flip directive

AngularJS directive that allows to achieve 3D card flip effect.

Demo

Quick start

Load angular-flip.css and angular-flip.js into your html:

<link rel="stylesheet" href="https://github.com/lemming/angular-flip/blob/master/path/to/angular-flip.css" />
<script src="https://github.com/lemming/angular-flip/raw/master/path/to/angular-flip.js"></script>

Inject angular-flip into your application module:

var app = angular.module('MyApp', ['angular-flip']);

Have fun:

<!-- Vertical flip -->
<flip flip-toggle>
    <flip-front>Visible content goes there</flip-front>
    <flip-back>The other side</flip-back>
</flip>
<!-- Horizontal flip -->
<flip flip-toggle horizontal>
    <flip-front>Visible content goes there</flip-front>
    <flip-back>The other side</flip-back>
</flip>

License

angular-flip uses the MIT license