Flipper Examples

Default Flip

A
A
JavaScript

          $('.flipper').flipper()
        

Multiple Flips

A
A
Javascript

          $('.flipper').flipper({
            'turns': 2
          })
        

Callback after Flip

A
A
Javascript

          $('.flipper').flipper({
            'callback': function () {
              alert("flippin' heck!")
            }
          })
        

Usage

You must have the following markup for flipper to work. The two divs with class front and back are what will display, front will be displayed first, back will only be displayed after the flipping has occurred.

The flipper div holds both the two sides that will be flipped and the container div holds the whole flipping markup. The flipper div must be the exact same size as both the front and back div, which also must be the same size. All three of which need to be position absolute.

HTML

        <div class='container'>
          <div class='flipper' id='ex2'>
            <div class='front'></div>
            <div class='back'></div>
          </div>
        </div>
      
CSS

        #container {
          height: 356px;
          width: 320px;
          background-color: rgba(56,108,179, 0.5);
        }

        .flipper {
          position: absolute;
          height: 300px;
          width: 200px;
          left: 60px;
          top: 28px;
        }

        .front {
          position: absolute;
          height: 300px;
          width: 200px;
        }

        .back {
          position: absolute;
          height: 300px;
          width: 200px;
        }
      

Support

Currently 3d rotations are only supported in Safari 4+ and Chrome 12+.

Options

The following options can be set to customise flipper

Option Default Description
container '.container' The containing div that holds the flipper
perspective 800 How far away along the z axis the object to flip appears
duration 2 How long the flip effect lasts for in seconds
axis Y The axis for the object is flipped on
turns 0 The number of full rotations before the other side of the flipped object is shown
callback none A callback that will be called when the flipping has stopped