2012-06-27 4 views
0

Я пытаюсь повернуть Div (тег), с помощью JQuery с помощью следующего кода:CSS Transform Rotate - Rendering выпуск в Chrome

$(this).addClass("rotate1"); 

.rotate1{ 
-webkit-transform: rotate(1deg); 
-webkit-transform-origin: 0% 0%; 
-moz-transform: rotate(1deg); 
-moz-transform-origin: 0% 0%; 
-o-transform: rotate(1deg); 
-o-transform-origin: 0% 0%; 
-ms-transform: rotate(1deg); 
-ms-transform-origin: 0% 0%; 
transform: rotate(1deg); 
transform-origin: 0% 0%; 
} 

Но у меня проблемы с отображением, то is't отображается в полной мере. Здесь код на jsfiddle: http://jsfiddle.net/4CgPD/

Проблема возникает, только если я пытаюсь повернуть статью jQuery. Если я присвою ему класс css с -webkit-transform..rotate ... тогда он отлично работает.

Проблема возникает в Chrome, она отлично работает в Firefox.

+0

Если вы собираетесь использовать jQuery для вращения, я рекомендую использовать этот плагин: http://code.google.com/p/jqueryrotate/ – eivers88

+0

@ eivers88 nope, не работает, я получаю тот же результат. –

ответ

0

Не уверен, что это решит вашу проблему, потому что сегодня невозможно получить доступ к jsfiddle, как кажется (504).

Вместо того, чтобы добавить класс, я бы назначить преобразование внутри JavaScript, например:

document.querySelector(this).style.webkitTransformOrigin = "0% 0%" 
document.querySelector(this).style.webkitTransform = "rotate(1deg)" 

Я нашел выполнения преобразования и переходы непосредственно в JavaScript делает анимацию более гладкой на мобильных устройствах.

+0

Я пробовал, что это не сработало. Однако если я добавлю класс по умолчанию в html, то он будет работать. –

0

Я заметил, что у Chrome часто возникают проблемы с двойным наследованием, когда дело доходит до префиксов поставщика, у меня недавно была проблема с градиентами. Мне пришлось сбросить свойство -webkit, которое было излишним. Я не думаю, что это проблема здесь, но я думал, что стоит подняться.

Смежные вопросы