Question

我在jQuery中创建了一个简单的脚本，它采用图像并慢慢旋转它。 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();

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

Answer 1

你应该让图像成为CSS中div的背景，然后旋转div。

Answer 2

您可以将border-radius提供给img，但它无法在Opera中使用（它无论如何都无效）。

Answer 3

尝试transform-style：preserve-3d

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

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

3 个答案: