CODEWITHSUNDEEP
csswebkit
Johnny Tops
Johnny Tops

Reputation: 610

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;
     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?

Upvotes: 5

Views: 864

Answers (3)

xiaozhu
xiaozhu

Reputation: 1

try transform-style:preserve-3d

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

Upvotes: 0

seler
seler

Reputation: 9213

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

Upvotes: 0

Rich Bradshaw
Rich Bradshaw

Reputation: 73055

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

Upvotes: 2

Related Questions