Для начала нам потребуется файлик с jQuery 1.2.6 и jQuery UI под нее. Потом мы пойдем на сайт разработчика плагина и скачаем его оттуда.

Рассмотрим аргументы плагина:

• direction: направление вращения (возможные вариант — tb, bt, rl, lr);
• bgColor: цвет фона блока в начале вращения;
• color: цвета фона блока в конце вращения;
• speed: скорость вращения;
• content: определяет новое содержание развернувшегося блока (текст, html или объект jQuery).

Ну вот, значит чтобы развернуть по вертикали блок в id="myBlock" за полсекунды, при это чтобы сначала фон блока был белым, а потом черным, плюс чтобы в конце в блока вставить содержимое блока с id="myNewBlock", нужно написать вот так:

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

Ага, а теперь давайте сделаем что-нибудь более интересное. Скажем, у нас есть 4 карты. При клике на любую их них, эта карта должна поворачиваться. Изначально карты рубашкой вверх.

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();

});

Смотрим, что получили. По моему довольно симпатично ;-)

А теперь вопрос к вам, дорогие читатели. Какое практическое применение вы видите этому плагину? Пришел ли вам на ум какой-нибудь случай, где можно использовать эту штуку? Если да, то не стесняйтесь, пишите в комментах!

P.S. И еще, дорогие читатели, как вы относитесь к идее сделать форум на базе нашего сайта? Вы бы задавали там всякие интересные вопросы, а мы отвечали на них. Как вам?