Проблема отбрасывания границы-радиуса Webkit при использовании -webkit-transform - PullRequest
5 голосов
/ 08 мая 2011

Я сделал простой скрипт в 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, равный 1/2 от высоты div, чтобы изображение выглядело как круг. Вращение выглядит хорошо в Firefox 4.0.1, но когда я тестировал его в Chrome, изображение начинает выходить за границы радиуса, как только вращение начинается. Кто-нибудь знает способ предотвращения кровотечения изображения?

Ответы [ 3 ]

2 голосов
/ 08 мая 2011

Вы должны сделать изображение фоном div в CSS, а затем повернуть div.

0 голосов
/ 26 августа 2016

попробуйте преобразовать стиль: preserve-3d

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

0 голосов
/ 08 мая 2011

Вы можете присвоить border-radius img, но в Opera это не сработает (все равно не работает).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...