3D Flip Animations by using jQuery: 3 Demos

3D flip animations and jQuery

In this tutorial, a jQuery plug-in is used for creating 3D flip animations. The plug-in name is “flip” which can be downloaded from this link.

You may specify the back and front content differently for the “card” used for animation. The animation may occur as you bring the mouse over the specified element like div or at the click event as well. As the mouse is brought over or clicked in the specified element, the back content will display with the flip animation. As you take the mouse away or click again, the “front” content will display again with an animation.

See the live demos below for using this plug-in along with how to set up this plug-in.

A demo of jQuery animation (3D flip)

In this example, as you bring the mouse over the card area, the div will animate with a flip, and “back” content will display. You may adjust the speed of the flip animation by using the speed option in the jQuery code section. Have a look at the live demo and code which is followed by how to set up this plug-in for your web pages:

jQuery flip animation

See online demo and code

For setting up this cool plug-in in your web pages, simply include the jQuery library along with the plug-in’s flip.js file in the <head> section.

<script src=”http://code.jquery.com/jquery-1.11.3.min.js”></script>

<script src=”js/flip/flip.js”></script>

You may define the style of cards or area where the flip animation will occur in the <style> section or your external CSS file. In the demo, it is defined in the <head> section’s <style> area:

   <style type="text/css">

      .card {

        width: 500px;

        height: 200px;

        margin: 20px;

      }

      .front, .back, .other-front, .other-back {

        border: 2px gray solid;

        padding: 10px;

      }

      .front, .other-front {

        background-color: #408080;

        color: #fff;

      }

      .back, .other-back {

        background-color: #C6E3E3;

      }

    </style>

In the markup section, use the card class in the <div> tag and inside that <div> first use the front div content which is followed by back div. The front div’s content will display as web page loads while the back div’s content will display as the mouse hovers over the card area.

  <div id="card-flip-animation" class="card">

      <div class="other-front">

          Front: The front content will display first. Palce front content here. The front content will display first. Palce front content here. The front content will display first. Palce front content here. The front content will display first. Palce front content here.

      </div>

      <div class="other-back">

          <a href="http://google.com">link</a>

          Back: The back content will display as you bring mouse over this div element. The back content will display as you bring mouse over this div element. The back content will display as you bring mouse over this div element.

      </div>

    </div>

Finally, the jQuery code that deals with the flip animation. There, you may specify a few options of the plug-in like axis (x or y), speed, trigger at hover or click, front and back etc.

  <script type="text/javascript">

    $(function(){

      $("#card-flip-animation").flip({

        axis: "y", // y or x

        reverse: false, // true and false

        trigger: "hover", // click or hover

        speed: '1000',

        front: $('.other-front'),

        back: $('.other-back'),

        autoSize: false

      });

 

    });

    </script>

Get the complete code in the demo page’s left panel.

A demo of flip animation on click

In this example, the animation occurs as you click the card’s area rather mouse hover.  The only difference between this and above example is the trigger option where I used click value in that case rather hover value.

jQuery flip animation click

The markup is the same while this script is used in the example:

    <script type="text/javascript">

    $(function(){

      $("#card-flip-animation").flip({

        axis: "y", // y or x

        reverse: true, // true and false

        trigger: "click", // click or hover

        speed: '1500',

        front: $('.other-front'),

        back: $('.other-back'),

        autoSize: false

      });

 

    });

    </script>

A demo of using images as the flip animation

In this example, rather than using the text content, I have used two images. One image, which is smaller, is for the front part and as you hover the mouse over it, the larger image will display with flip animation. The speed of the animation is kept 2000 i.e. 2 seconds. For demonstration, the axis value is used “x” unlike “y” used in first two examples:

jQuery flip animation images

The following markup is used:

   <div id="card-flip-animation" class="card">

      <div class="other-front">

          <img src="images/banana-small.jpg">

      </div>

      <div class="other-back">

          <img src="images/banana.jpg">

      </div>

    </div>

 

The script:

    <script type="text/javascript">

    $(function(){

      $("#card-flip-animation").flip({

        axis: "x", // y or x

        reverse: true, // true and false

        trigger: "hover", // click or hover

        speed: '2000',

        front: $('.other-front'),

        back: $('.other-back'),

        autoSize: false

      });

 

    });

    </script>

 

 

That’s it!