Добрый день всем!
Из предыдущей темы я спрашивала про движение картинки вокруг своей оси, вот ссылка:
вращение вентилятора вокруг своей оси
Все работает, оба варианта которые мне предложили, но везде этот вентилятор, как пьяный крутится, думала, что дело в картинки, но оказалось нет, в 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;';
}
Хотелось бы понять в чем суть, такой не ровной прокрутки вентилятора? И есть ли решение этой проблемы?