Webkit border-radius bleed issue when using -webkit-transform

Question

I made a simple script in jQuery that takes an image and slowly rotates it. Link to example

     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();

I decided to put a border-radius on the div equal to 1/2 of the div height to make the image look like a circle. The rotation looks fine in Firefox 4.0.1, but when i tested it in Chrome the image bleeds over the border-radius as soon as the rotation starts. Does anyone know of a way to prevent the image from bleeding over?

Answer 1

You should make the image the background of the div in CSS, then rotate the div.