クリックした場所をズームするサンプルを作ってみました。

今回作ったサンプル
http://jk0602.sakura.ne.jp/sample/zoom/

ソースコード
http://jk0602.sakura.ne.jp/sample/zoom/zoom.zip

※firefoxだとoffsetX、offsetYが使えなくてうまく動いていません・・・別途処理が必要。。。

index.html

<body>
	<div class="wrapper">
		<div class="content" zoom="off">
		</div>
	</div>
</body>

zoom.js

$(function(){
	var click_x,click_y;
	$(".content").click(function(e){
		if($(this).attr("zoom")=="off"){
			$(this).attr("zoom","on");
			click_x = e.offsetX;
			click_y = e.offsetY;
			Zoom(2.0, click_x, click_y);
		}else{
			$(this).attr("zoom","off");
			Zoom(1, click_x, click_y);
		}
	});

	function Zoom(zoom, x, y){
		$(".content").css({
			"-moz-transition": "all 0s ease 0",
			"-webkit-transition": "all 0s ease 0",
			"-webkit-transform-origin": x+"px "+y+"px",
			"transform-origin": x+"px "+y+"px",
		});

		setTimeout(function(){
			$(".content").css({
				"-moz-transition": "all 0.5s ease 0",
				"-webkit-transition": "all 0.5s ease 0",
				"-webkit-transform" : "scale("+zoom+")",
				"transform" : "scale("+zoom+")",
			});
		},1);
	}
});

大きなポイントは３点
①offsetX、offsetYでイベントが発生した要素上のX,Y座標を取得している
②「transform-origin」で拡大縮小させる中心座標を指定
③「"-webkit-transition": "all 0.5s ease 0"」「"-webkit-transform" : "scale("+zoom+")"」で0.5秒かけて拡大縮小のアニメーションをさせる

　最初、以下のように「"transform-origin": x+"px "+y+"px"」と「"transform" : "scale("+zoom+")"」を同時にやっていたんですが、これだと、拡大する中心座標も0.5秒かけて移動してしまうので、スムーズに拡大アニメーションができませんでした。
　なので、最初に拡大する中心座標を設定しておき、そのあと、拡大縮小させるようにしました。（上記プログラムでsetTimeoutを使っているところ）・・・ちょっと強引な気がするけれども。。。もっとスマートな方法ありそう。

function Zoom(zoom, x, y){
	$(".content").css({
		"-moz-transition": "all 0.5s ease 0",
		"-webkit-transition": "all 0.5s ease 0",
		"-webkit-transform-origin": x+"px "+y+"px",
		"transform-origin": x+"px "+y+"px",
		"-webkit-transform" : "scale("+zoom+")",
		"transform" : "scale("+zoom+")",
	});
}