After creating a basic jQuery script to slowly rotate an image, I encountered an issue where the rotated image would bleed over the border-radius in Chrome. The rotation works smoothly in Firefox 4.0.1 but not in Chrome. To see the example and code, check out this link.
deg = 0;
derp = false;
function callRotate(){
if(!derp){
setInterval(rotate, 50);
}
}
function rotate(){
$("#rotate_me > img").css({"-webkit-transform":"rotate("+ deg +"deg)", "-moz-transform":"rotate("+ deg +"deg)"});
deg+=.2;
}
callRotate();
To make the image look like a circle, I added a border-radius to the div equal to half of its height. If anyone knows how to prevent the image from bleeding over the border-radius during rotation, please share your solution!