使用-webkit-transform时,Webkit border-radius bleed问题

Question

我在jQuery中创建了一个简单的脚本,它采用图像并慢慢旋转它. 链接到示例

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

我决定在div上设置一个等于div高度1/2的边界半径,使图像看起来像一个圆圈.Firefox 4.0.1中的旋转看起来很好,但是当我在Chrome中测试它时,一旦旋转开始,图像就会在边界半径上流血.有谁知道防止图像流血的方法？

Answer 1

您应该在 CSS 中将图像设置为 div 的背景，然后旋转 div。