Rotate Div or Image using Jquery (IE and Firefox Tested)

Rotate Div or Image using Jquery (IE and Firefox Tested


Here is the Html image tag for which one you want to rotate 90 degeree, 180 degree, etc. This rotating is clock wise direction. you can make this as a anticlock wise direction too

img src="test.jgp" id="test1"
img src="123.jgp" id="test2"


Here is the Javascript function for image or div rotation.



function rotateDiv(childDiv){
//FOR IE 1=>90, 2=>180, 3=>270, 4=>360//filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);
var style_rotate = $("#"+childDiv).attr("style");
var checkIndex = $("#"+childDiv).attr("style");
if(checkIndex.indexOf("(rotation=4)") != -1 || checkIndex.indexOf("rotate(360deg)") != -1){
style_rotate = style_rotate+"-moz-transform: rotate(90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);";
}
else if(checkIndex.indexOf("(rotation=1)") != -1 || checkIndex.indexOf("rotate(90deg)") != -1){
style_rotate = style_rotate+"-moz-transform: rotate(180deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);";
}
else if(checkIndex.indexOf("(rotation=2)") != -1 || checkIndex.indexOf("rotate(180deg)") != -1) {
style_rotate = style_rotate+"-moz-transform: rotate(270deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);";
}
else if(checkIndex.indexOf("(rotation=3)") != -1 || checkIndex.indexOf("rotate(270deg)") != -1) {
style_rotate = style_rotate+"-moz-transform: rotate(360deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);";
}
$("#"+childDiv).attr("style",style_rotate);

}