For the starters we are going to need jQuery 1.2.6 and jQuery UI for it. After that we are going to need togo the plugin developer’s site and download it.

The plugin has the following variables:

* Direction: the direction of the flip (tb, bt, rl, lr)
* bgColor: the color of the of the block in the beginning of the movement
* color: the color of the block in the end of the movement
* speed: the speed of the movement
* content: defines new content of the block after the movement (text, html, or jQuery object)

So in order to unfold verticaly a block named id=”myBlock” in a half of a second. and to have it in white first and then turn it into black  and then in the end to change the content of the block with to ic=”myNewBlock” then we are going to use this code:

$('myBlock').flip({
    direction: tb,
    bgColor: #FFFFF,
    color: #000000,
    speed: 500,
    content: $('myNewBlock')
});

OK, now let’s do something more interesting. Let’s say we got four cards. originally the card is upside down. By a mouse click the card should flip.

HTML

<ul class="playing-cards">
	<li>
    	<div class="card1 back"></div>
    </li>
	<li>
    	<div class="card2 back"></div>
    </li>
	<li>
    	<div class="card4 back"></div>
    </li>
	<li>
    	<div class="card3 back"></div>
    </li>
</ul>

CSS

ul.playing-cards {
	margin: 0;
	padding: 0;
}

ul.playing-cards li {
	margin: 0 30px 20px 0;
	padding: 0;
	float: left;
	width:144px;
	height: 209px;
	list-style-type: none;
	cursor: pointer;
}

ul.playing-cards li .card1.back,
ul.playing-cards li .card2.back,
ul.playing-cards li .card3.back,
ul.playing-cards li .card4.back {
	width:144px;
	height: 209px;
	background: url(images/back.gif) 0 0 no-repeat;
}

ul.playing-cards li .card1 {
	width:144px;
	height: 209px;
	background: url(images/1.gif) 0 0 no-repeat;
}

ul.playing-cards li .card2 {
	width:144px;
	height: 209px;
	background: url(images/2.gif) 0 0 no-repeat;
}

ul.playing-cards li .card3 {
	width:144px;
	height: 209px;
	background: url(images/3.gif) 0 0 no-repeat;
}

ul.playing-cards li .card4 {
	width:144px;
	height: 209px;
	background: url(images/4.gif) 0 0 no-repeat;

JavaScript

$(document).ready(function() {
	var speed = 150;
	function backFront(el) {
		el.toggleClass('back');
	}

	function rotateCard(el, sp) {
		el.flip({
			direction: 'rl',
			bgColor: '#FFFFFF',
			color: '#e4bcc1',
			speed: sp
		});
		setTimeout(backFront(el), sp);
	}

	function bindRotation() {
		$('.playing-cards .back').each(function() {
			$(this).click(function(e) {
				rotateCard($(this), speed);
			});
		});
	}	

	bindRotation();

});

Here is your result… beautiful isn’t it ?