Problema de sangrado del límite del radio del Webkit al usar -webkit-transform

Question

Hice un script simple en jQuery que toma una imagen y la rota lentamente. 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(); 

he decidido poner una frontera de radio en el div igual a 1/2 de la altura del div para que la imagen se vea como un círculo. La rotación se ve bien en Firefox 4.0.1, pero cuando lo probé en Chrome, la imagen sangra sobre el radio del borde tan pronto como comienza la rotación. ¿Alguien sabe de una manera de evitar que la imagen se desangre?

Answer 1

Debe hacer que la imagen sea el fondo del div en CSS, luego gire el div.

Answer 2

Puede dar border-radius a img, pero no funcionará en Opera (no funciona de todos modos).

Answer 3

tratar de transformar al estilo: preserve-3d

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