フリップアニメーションを使う場合、CSS3で既述するのが一般的ですが、古めのブラウザにも対応させるとなると、CSS3だけでは難しいものがあります。そういうケースでは、javascriptを使ったほうが、比較的容易に実装できます。このjQueryプラグイン rotate3di.jsもその中の一つです。
パネルにマウスオーバーすると、立体的なアニメーションで裏返ります。マウスアウトすると、元に戻ります。設置は、「class="front"」（表側）を指定したdivと「class="back"」（裏側）を指定したdivを入れたliタグを並べています。
$(document).ready(function () {
$('#nav-list-example li div.back').hide().css('left', 0);
function mySideChange(front) {
if (front) {
$(this).parent().find('div.front').show();
$(this).parent().find('div.back').hide();
} else {
$(this).parent().find('div.front').hide();
$(this).parent().find('div.back').show();
}
}
$('#nav-list-example li').hover(
function () {
$(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise', sideChange: mySideChange});
},
function () {
$(this).find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange});
}
);
});
