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

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

     deg = 0;
     derp = false;
   开发者_如何学Go  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?

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

You can give border-radius to img, but it wont work in Opera (it's not working anyway).

try transform-style:preserve-3d

http://blog.csdn.net/w20101310/article/details/52298636