画像2枚重ねて回転っぽい動きを実装

transformでの回転の動きを、画像2枚重ねて
それっぽく実装しました。
画像2枚重ねて回転っぽい動きを実装のデモページ

サンプルコード

HTML

<div class="rotateH">
	<img src="./img01.jpg" width="400" height="300" class="surface" />
	<img src="./img02.jpg" width="400" height="300" class="reverse" />
</div>
<div class="rotateW">
	<img src="./img03.jpg" width="400" height="300" class="surface" />
	<img src="./img04.jpg" width="400" height="300" class="reverse" />
</div>

CSS

.rotateH, .rotateW {
	position: relative;
	width: 400px;
	height: 300px;
}
.rotateH img, .rotateW img {
	position: absolute;
	top: 0;
	left: 0;
}

JavaScript

$(function() {
	var rotationSpeed = 150;

	// 縦回転の初期設定
	$('.rotateH .reverse').each(function() {
		$(this).css({
			height: 0,
			marginTop: $(this).height() / 2
		});
	});

	// 縦回転の処理
	$(".rotateH").hover(function() {
		// 表面の非表示
		$('.surface', this).animate({
			height: 0,
			marginTop: $(this).height() / 2
		}, rotationSpeed);
		// 裏面の表示
		$('.reverse', this).delay(rotationSpeed).animate({
			height: $(this).height(),
			marginTop: '0'
		}, rotationSpeed);
	}, function() {
		// 裏面の非表示
		$('.reverse', this).animate({
			height: 0,
			marginTop: $(this).height() / 2
		}, rotationSpeed);
		// 表面の表示
		$('.surface', this).delay(rotationSpeed).animate({
			height: $(this).height(),
			marginTop: '0'
		}, rotationSpeed);
	});


	// 横回転の初期設定
	$('.rotateW .reverse').each(function() {
		$(this).css({
			width: 0,
			marginLeft: $(this).width() / 2
		});
	});

	// 横回転の処理
	$(".rotateW").hover(function() {
		// 表面の非表示
		$('.surface', this).animate({
			width: 0,
			marginLeft: $(this).width() / 2
		}, rotationSpeed);
		// 裏面の表示
		$('.reverse', this).delay(rotationSpeed).animate({
			width: $(this).width(),
			marginLeft: '0'
		}, rotationSpeed);
	}, function() {
		// 裏面の非表示
		$('.reverse', this).animate({
			width: 0,
			marginLeft: $(this).width() / 2
		}, rotationSpeed);
		// 表面の表示
		$('.surface', this).delay(rotationSpeed).animate({
			width: $(this).width(),
			marginLeft: '0'
		}, rotationSpeed);
	});
});

やっていること自体は単純で、縦回転の場合

1. まず最初に、裏面の画像を高さ0px、margin-topを高さの半分だけ指定して、
   縦位置の真ん中に配置しておく。(高さ0pxなので表示はされていません。)
2. 画像にオンマウスしたとき、表面の画像を高さを0pxに縮小しながら(上方向へ移動)、
   margin-topを高さの半分だけ増やす(下方向へ移動)。
   これでちょうど縦位置の真ん中で高さが0になって非表示状態になります。
3. 表面の画像が非表示になったら、裏面の画像の高さを増やしながら(下方向へ移動)、
   margin-topを0pxに減らす(上方向に移動)。

カーソルが外れた時は、裏面と表面が反対のアニメーションをするようにします。
横回転はheightがwidth、margin-topがmargin-leftになっているだけです。
　

普通はtransformを使ったほうがいいと思いますが、
IE8なんかでも同じ動きをさせないといけない場合などに覚えておくと便利です。