jq中使用rotate方法旋转图片和css中使用rotate方法旋转图片

当一个页面中有多个图片需要进行旋转操作的时候。
说明：在进行图片旋转的时候，需要注意的点1.宽高在旋转的时候需要做变换。2.显示图片的区域需要将图片区域的宽高写死。

1. jq中使用rotate方法旋转图片

function rotateImg(objId){
    	var image = new Image();  
    	image = document.getElementById(objId);
    	var w = image.width;
    	var h = image.height;  	
    	var dg = $("#"+objId).attr("degree");		
	dg = Number(dg)+90;
    	
    	$("#"+objId).rotate(dg); 
    	$("#"+objId).attr("degree",dg);
    	$("#"+objId).attr("width",h);
    	$("#"+objId).attr("height",w); 
    	$("#"+objId).css("transform-origin","70.5% 50% 0px");
	// 图片显示区域
    	var can = $("#canvasT_"+objId).offset();
    	$("#"+objId).offset({top:can.top,left:can.left});
}

注：使用jq进行图片旋转的时候，在jq的rotate()方法里，可能有一个全局的变量控制传入的角度degree（暂时没找到方法在哪里），因此，在一个页面有多个图片需要进行旋转的时候，当第一个图片旋转了90度，就算第二个图片传入方法的度数为90度，实际在旋转的时候却是旋转了180度，因此，这种方式不使用一个页面多张图片旋转的情况。

2. 使用css方法旋转图片

// 使用css方法旋转图片
function rotateImg(objId){
    	var image = new Image();  
    	image = document.getElementById(objId);
    	var w = image.width;
    	var h = image.height;  	
    	var dg = $("#"+objId).attr("degree");		
	dg = Number(dg)+90;
    	
	$("#"+objId).css("transform","rotate("+dg+"deg)");
    	$("#"+objId).attr("degree",dg);
    	$("#"+objId).attr("width",h);
    	$("#"+objId).attr("height",w); 
    	$("#"+objId).css("transform-origin","70.5% 50% 0px");
    	var can = $("#canvasT_"+objId).offset();
    	$("#"+objId).offset({top:can.top,left:can.left});
}

注：使用css对图片进行旋转的方式，这种方式暂时未发现什么弊端，在一个页面有多个图片需要进行旋转的时候可使用。

offset方法：http://www.w3school.com.cn/jquery/css_offset.asp