Движение каринки вокруг своей оси

[Nailya]

Добрый день.

 

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

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

 

Вопрос, из-за чего такое неровное движение картинки вокруг своей оси?

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

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;';   }

#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);    }}

<ul class="ventilator">                        <li class="start" id="start"onclick="startRound();">пуск</li>                        <li class="stop" id="stop" onclick="stopRound()">стоп</li>                        <li class="vent"><img src="img/vent_small.png" alt="" id="vent_img"></li>  </ul>

Edited April 21, 2014 by Nailya

[mrnobody]

Мне кажется проблема в картинке — у нее размер 121×123px и поэтому центр картинки сместился.

[Great Rash]

Сама картинка кривая. Сравните где центр у картинки и у вентилятора.

[Nailya]

спасибо, поняла свою ошибку

[Zverushka]

оффтоп. Обожаю анимацию. Делается так просто - но выглядит так эффектно.

[SelenIT]

Куда transform-origin поставите, там центр и будет..