И снова про вентилятор
 

Добрый день всем!

Из предыдущей темы я спрашивала про движение картинки вокруг своей оси, вот ссылка:http://javascript.ru/forum/dom-windo...voejj-osi.html

Все работает, оба варианта которые мне предложили, но везде этот вентилятор, как пьяный крутится, думала, что дело в картинки, но оказалось нет, в css c padding'ми и margin'ми химичила, но нет.

Вот ссылка на страницу, где можно взглянуть на работу вентилятора http://test.w-complex.ru/mac/control...rol_panel.html

На страницы уменя используется этот вариант скрипта

#vent_img,#degImg1
{
    display: inline-block;
    -webkit-animation: imageRotate 1s linear infinite;
    -o-animation: imageRotate 1s linear infinite;
    animation: imageRotate 1s linear infinite;
}
@-webkit-keyframes imageRotate
{
    from
    {
        -webkit-transform: rotate(0deg);
    }
    to
    {
        -webkit-transform: rotate(360deg);
    }
}
@-o-keyframes imageRotate
{
    from
    {
        -o-transform: rotate(0deg);
    }
    to
    {
        -o-transform: rotate(360deg);
    }
}
@keyframes imageRotate
{
    from
    {
        transform: rotate(0deg);
    }
    to
    {
        transform: rotate(360deg);
    }
}

function startRound() {

    document.getElementById('vent_img').style.cssText =
        '-webkit-animation-play-state:running;-o-animation-play-state:running;animation-play-state:running;';
    document.getElementById('degImg1').style.cssText =
        '-webkit-animation-play-state:running;-o-animation-play-state:running;animation-play-state:running;';

    

}
function stopRound() {

    document.getElementById('vent_img').style.cssText =
        '-webkit-animation-play-state:paused;-o-animation-play-state:paused;animation-play-state:paused;';
    document.getElementById('degImg1').style.cssText =
        '-webkit-animation-play-state:paused;-o-animation-play-state:paused;animation-play-state:paused;';

  
}

Хотелось бы понять в чем суть, такой не ровной прокрутки вентилятора? И есть ли решение этой проблемы?

В стили картинки добавьте это:

-webkit-transform-origin: 22px 26px;
-moz-transform-origin: 22px 26px;
-o-transform-origin: 22px 26px;
transform-origin: 22px 26px;
width: 50px;
height: 50px;