jQuery Plugin To Rotate An Element with 3D Flip Effects - Flipper

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.