Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Вращение на 360 градусов CSS3
Вращение на 360 градусов CSS3
AndreyДата: Воскресенье, 02.02.2014, 17:09:47 | Сообщение # 1
Технарь
Offline
3

В этой статье я покажу как при наведении курсора на картинку, картинка будет поворачиваться на 360 градусов.

Смотрим тест на фидле

Заходим в CSS и прописываем:
Код
.socialNetworks {display:inline;margin-right:10px;}    
.socialNetworks:hover {display:inline;}    
.link_me {bottom:0;margin-top:0px; margin-right:0px;}    
.socialNetworks img {width:88px;height:31px;background:url(Ссылка на картинку);-webkit-transition: all 400ms;-moz-transition: all 400ms;-o-transition: all 400ms;transition: all 400ms;position:relative;bottom:0px;right:0px;}    
.socialNetworks img:hover {transform:rotate(-360deg);-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);position:relative;bottom:0px;right:0px;}  


Теперь там где нужно чтоб отображалась картинка прописываем:
Код
<div class="link_me">    
<div class="socialNetworks"><img title="Место свободно" src="Ссылка на картинку"></div>   
</div>


В этом примере я использовал баннер, вы можете использовать свою картинку!

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Вращение на 360 градусов CSS3
Страница 1 из 11
Поиск: