Flip An Html Element with jQuery and CSS3 - Flipper

Flipper is a simple jQuery script that makes use of CSS3 transform and perspective properties to flip an Html element and reveal the content on the back.

How to use it:

1. Load the required jQuery javascript library from a CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

2. Create the html for a flippable card with front/back contents.

<div class="flipWrapper">
<div class="card">
<div class="face front">
Front Content
</div>
<div class="face back">
Back Content
</div>
</div>
</div>

3. The CSS to style the card and set the flip behaviors. 

.flipWrapper {
-webkit-perspective: 1000;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flipWrapper .card.flipped {
-webkit-transform: rotatey(180deg);
}
.flipWrapper .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flipWrapper .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 200px;
}
.flipWrapper .card .front {
position: absolute;
z-index: 1;
background: rgb(57, 171, 62);
color: white;
cursor: pointer;
border-radius: 10px;
}
.flipWrapper .card .back {
-webkit-transform: rotatey(-180deg);
background: blue;
background: red;
color: white;
cursor: pointer;
border-radius: 10px;
}

4. The jQuery codes to enable the flip effect.

$(document).ready(function () {
    $('.flipWrapper').click(function () {
        $(this).find('.card').toggleClass('flipped');
        return false;
    });
});

---

This awesome jQuery plugin is developed by aqeelb. For more Advanced Usages, please check the demo page or visit the official website.