Issue with releasing Webkit edge radius when using -webkit-transform

Question

I made a simple script in jQuery that takes an image and rotates it slowly. Link to an 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 the border radius on the div equal to 1/2 the height of the div so that the image looks like a circle. The rotation looks great in Firefox 4.0.1, but when I tested it in Chrome, the image will immediately roll along the boundary radius immediately after the start of rotation. Does anyone know how to prevent image bleeding?

Answer 1

You have to make the image the background of the div in CSS, and then rotate the div.

Answer 2

border-radius img, Opera ( ).

Answer 3

: -3d

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