html+css+js 实现鼠标点击平滑转动立体方形

html结构：

<div class="wrap">
	<div class="cube">
		<div class="out_front">
			<img src="http://hovertree.com/hvtimg/bjafjg/p1n3aebo.jpg" class="pic" />
		</div>
		<div class="out_left">
			<img src="http://hovertree.com/hvtimg/bjafjg/7ciu9jqt.jpg" class="pic" />
		</div>
		<div class="out_back">
			<img src="http://hovertree.com/hvtimg/bjafjg/6omilcpi.png" class="pic" />
		</div>
		<div class="out_right">
			<img src="http://hovertree.com/hvtimg/bjafjg/x9h3ho61.jpg" class="pic" />
		</div>
		<div class="out_top">
			<img src="http://hovertree.com/hvtimg/bjafjg/1rysrqvg.jpg" class="pic" />
		</div>
		<div class="out_bottom">
			<img src="http://hovertree.com/hvtimg/bjafjg/nre7yne5.jpg" class="pic" />
		</div>
	</div>
</div>

css：

.wrap{
    width: 200px;
    height: 200px;
    margin: 150px auto;
    position: relative;			
}
.cube{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
}
.cube div{
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 5px;
}
.pic{
    width: 200px;
    height: 200px;
}
.out_front{
    transform: rotateY(0deg) translateZ(100px);
}
.out_left{
    transform: rotateY(90deg) translateZ(100px);
}
.out_back{
    transform: translateZ(-100px) rotateY(180deg);
}
.out_right{
    transform: rotateY(-90deg) translateZ(100px);
}
.out_top{
    transform: rotateX(90deg) translateZ(100px);
}
.out_bottom{
    transform: rotateX(-90deg) translateZ(100px);
}

js:

$(function(){
    var obj = new Object;
    obj.x = 80;
    obj.y = -30;
    var MOUSE_LEFT_BUTTON = 0;
    $(document).mousedown(function(event){
        var baseX = event.screenX;
        var baseY = event.screenY;
				
        var btn = event.button;
        if(btn === MOUSE_LEFT_BUTTON) {
            var i = obj.x;
            var j = obj.y;
            $(this).mousemove(function(ev){
                var x = (baseX - ev.screenX) + i;
                var y = (baseY - ev.screenY) + j;
                obj.x = x;
                obj.y = y;
		$('.cube').eq(0).css('transform', 'rotateX('+(obj.y)+'deg) rotateY('+(-obj.x)+'deg)');
            });
        }
    });
    $(document).mouseup(function(){
        $(document).unbind("mousemove");
    });
});

obj 对象保存初始化和记录转动后的  [x , y] 值，可以让每次点击鼠标转动的时候平滑过渡。[baseX, baseY] 获取鼠标点击的位置坐标。[x, y] 的为鼠标移动的距离 + 物体原来的 x, y值。