-webkit-transform을 사용할 때 Webkit border-radius bleed 문제가 발생했습니다.

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

나는 이미지가 원처럼 보이게 사업부 높이의 1/2과 동일 사업부에 테두리 반경을 넣어하기로 결정했다. Firefox 4.0.1에서는 회전이 정상적으로 보였지만 Chrome에서 테스트했을 때 회전이 시작 되 자마자 경계 반경에서 블리드가 발생했습니다. 누구든지 피가 흐려지는 것을 방지하는 방법을 알고 있습니까?

Answer 1

이미지를 CSS의 div 배경으로 설정 한 다음 div를 회전해야합니다.

Answer 2

border-radius에서 img까지 지정할 수 있지만 Opera에서는 작동하지 않습니다 (어쨌든 작동하지 않습니다).

Answer 3

변환 스타일을 시도해보십시오 보존-3D

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