Код можно вставить и в тело сообщения, и гаджет HTML/JavaScript. А вот и сам эффект.

А это код для него.
<style>.coleso {
-webkit-animation-name: spin;
-webkit-animation-duration: 15000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 15000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 15000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 10000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
}</style>
<img class="coleso" height="320" src=" адрес картинки " width="320" />
-webkit-animation-name: spin;
-webkit-animation-duration: 15000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 15000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 15000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 10000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
}</style>
<img class="coleso" height="320" src=" адрес картинки " width="320" />
15000ms-это скорость вращения, можно менять на свою. И пусть у всех голова идёт кругом.
Хороших всем выходных и последних летних денёчков. До встречи.
здесь можно оформить подписку на новые шпаргалки
Выглядит прикольно, с ума сойти можно от того, на что способен css :)
ОтветитьУдалитьСайхан, да уж. С css сейчас масса возможностей.Изучай не хочу. И флешек порой не надо.
УдалитьЗдравствуйте Вика! Прошу у Вас совета.
ОтветитьУдалитьСделал голый index.html и вставил Ваш код вращающейся картинки. Плюс файл images, куда вставил картинку. Все прекрасно! Вращается как надо.
Но вот вставляю этот же код в Adobe Muse в HTML, картинка вращается так, что центром вращения становится правый верхний угол картинки.
Никак не могу добиться, чтоб центром вращения стал центр картинки.
Поможете советом? Буду признателен!
Я сделал тестовый сайт для показа Вам:
http://test-coleso.vekkr.ru/
Ошибся: центром вращения является верхний ЛЕВЫЙ угол картинки.
ОтветитьУдалитьВладимир, В Блоггере у меня везде работает нормально. Попробуйте хотя бы здесь ваш код http://www.shpargalochki.ru/p/html.html У меня только вашу картинку не подгружает
УдалитьМогу единственное предложить вам подобный вариант отсюда https://habrahabr.ru/sandbox/78410/
Также укажите путь к картинке и заключите в теги style код CSS.
Вика! Большущее спасибо за оперативность и развернутый ответ!
ОтветитьУдалитьБуду продолжать эксперименты. На голом HTML+CSS все получается как надо. А при вставке в тело body Адобе Мьюз картинка по прежнему вращается взяв за центр верхний левый угол картинки. Буду искать причину этого глюка. При проверке в http://www.shpargalochki.ru/p/html.html всё хорошо и как надо.
Попробуйте установить на сайт основной и посмотреть. Удалить сразу потом если что не так.
ОтветитьУдалитьПопробовал. То же самое. Центр вращения - верхний левый угол картинки.
ОтветитьУдалитьКстати, код с хабра на голом HTML и CSS работает нормально. А при установке в Мьюз шестеренка вращается также с центром в верхнем левом углу ((
Эксперименты продолжаю...
Владимир, в любом случае отпишитесь потом пожалуйста. Самой уже интересно.
УдалитьКонечно, Вика! )
ОтветитьУдалитьВсё. Я отказался от идеи сделать вращающуюся картинку в Адобе Мьюз! Потеря времени. Нашел варианты как делать скриптом и с помощью джиквери, но это мне не по мозгам. Разобраться можно, но увы, некогда.
ОтветитьУдалитьА Вам, Вика, спасибо! Разбираясь с представленным Вами кодом, нашел кучу справочников по этой теме и детально разобрался в каждой косточке этого кода. Для меня это новые знания.
Спасибо!
Владимир, и Вам спасибо. А с джиквери просто подключить нужно и добавить в шаблон. Но будет время разберётесь. Новые знания это классно. Вообще, я у своих друзей поспрашивала сегодня, многие склонны к тому, что такая крутилка не очень хороша даже для браузера. Удачи Вам.
УдалитьВот, вместо крутилки за головой смастерил сверкалку )))
ОтветитьУдалитьhttp://proba.vekkr.ru/
Владимир, для тематики сайта, вполне симпатично. Я бы только поставила другую картинку. Моё мнение женщина на фотке должна быть в каких - то невероятно красивых украшениях. ИМХО.
УдалитьА где Ваш основной сайт.
Здравствуйте Вика!
ОтветитьУдалитьЯ обдумаю Ваш совет. В общем-то резон поменять центральную картинку есть.
Про сайт. Основного сайта нет и не будет. В данном случае мне заказали 270 одностраничников. Каждый день я должен выкладывать в тырнет по одному одностраничнику с предложением одного товара. Шаблон дизайна единый, менять в каждом только товар. Каждый день - новый товар.
Заказчица не хочет многостраничный сайт с кучей товара. Один лендинг - для одного товара.
Регистрирую только один домен. А все 270 будут только на поддоменах от этого главного домена.
Вот и нарабатываю единый шаблон. Вам показал еще очень сырую заготовку шаблона, над которым еще пока работаю. )
Час искал подходящее лицо в центр сайта. Пока ничего подходящего под мои требования. Найдется если в будущем - хорошо. А пока оставлю эту.
ОтветитьУдалитьЯ поняла. Удачи Вам, Владимир.
УдалитьСпасибо Вика!
ОтветитьУдалитьЗдравствуйте! Очень понравилась картинка Ваша. Не подскажите как сделать что б картинка крутилась не как колесо, а как ось, ну тоесть справа налево по центральной оси проходящей посредине картинки вертикально.. Ну вы поняли? и ещё желательно что б у картинки стал как бы обьём, что б она при прокрутке имела толщину.. Надеюсь я понятно излагаю)) трудно простые вещи описывать словами)) проще показать но как ? )))
ОтветитьУдалитьЗдравствуйте. Примерно поняла. Вариантов много. Можно и с помощью Javascript и jquery. У меня статьи нет на эту тему информации много. . Легче использовать transform-style почитайте здесь transform-style или вот здесь http://spritespin.ginie.eu/examples.html#basic-usage.html ещё вариант. Примеров много забейте в поиск вращение объёмного изображения вокруг оси.
ОтветитьУдалитьоооо, это очень круто, но только я не понимаю что то, у меня не работает в браузере это. как заставить что б крутился велосипед в обычном браузере? спасибо за ссылки!
УдалитьДам ещё один вариант, сама пробовала. Там Юрий ответит на Ваши вопросы http://www.sitehere.ru/3d-preobrazovaniya-i-animacii мне совсем нет сейчас перед праздником времени писать свои коды. Хотя темку эту нужно понять просто.
ОтветитьУдалитьок, спасибо !!!!
Удалить