A simple way to add a CSS3 flip effect to your content.
$ bower install jquery-flipper --save
In your web page:
<html>
<head>
<title>jQuery Flipper</title>
</head>
<body>
<section id="myFlipper">
<!-- There should be two elements inside the flipper -->
<section class="front"></section>
<section class="back"></section>
</section>
<script src="//code.jquery.com/jquery.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="bower_components/jquery-flipper/dist/jquery.flipper.min.js"></script>
<script>
$('#myFlipper').flipper({
rotationType: 'left-slide',
depth: 1000,
speed: 0.2
});
</script>
</body>
</html>You can also pass flipper options.
-
rotationType [string] the type of rotation (left, right, up, down, left-slide, right-slide)
-
event [string, object] this event to bind to
- “hover”
- “click”
- {type: “keydown”, keyCode: 13}
-
depth [number] the perspective applied to the element rotation (100 - 1000)
-
speed [number] the speed of the rotation (0.1 - 2.0)
View the demo here or in the demo directory.