Социальные иконки с эффектом  вращения

Социальные иконки с эффектом вращения

Социальные иконки с эффектом вращения-имеют шестиугольную форму,необычную,чаще встречаются либо круглые,либо квадратные,но такой формы впервые,поэтому что бы выделять свой сайт среди остальной серой массы можно использовать этот скрипт,к тому же в этом скрипте при наведении иконки вращаются

Установка:По месту расположения

Код
<div id="social" class="social">  
<a target="_blank" rel="nofollow" href="http://vk.com">  
<img border="0" src="/soc_icons/vk.png"style="margin-right: 1px;" /></a>  
<a target="_blank" rel="nofollow" href="http://odnoklassniki.com">  
<img border="0" src="/soc_icons/o.png"style="margin-right: 1px;" /></a>  
<a target="_blank" rel="nofollow" href="http://fb.com">  
<img border="0" src="/soc_icons/fb.png"style="margin-right: 1px;" /></a>  
<a target="_blank" rel="nofollow" href="http://twitter.com">  
<img border="0" src="/soc_icons/t.png"style="margin-right: 1px;" /></a>  
<a target="_blank" rel="nofollow" href="https://plus.google.com">  
<img border="0" src="/soc_icons/gp.png"style="margin-right: 1px;" /></a>  
<a target="_blank" rel="nofollow" href="http://linkedin.com">  
<img border="0" src="/soc_icons/in.png"style="margin-right: 1px;" /></a>  
<a target="_blank" rel="nofollow" href="http://livejournal.com">  
<img border="0" src="/soc_icons/lj.png"style="margin-right: 1px;" /></a>  
<a target="_blank" rel="nofollow" href="http://youtube.com">  
<img border="0" src="/soc_icons/yt.png"style="margin-right: 1px;" /></a>  
<a target="_blank" rel="nofollow" href="#">  
<img border="0" src="/soc_icons/rss.png"style="margin-right: 1px;" /></a>  
</div>


В CSS

Код
#social img {  
-moz-transition: all 0.8s ease-in-out;  
-webkit-transition: all 0.8s ease-in-out;  
-o-transition: all 0.8s ease-in-out;  
-ms-transition: all 0.8s ease-in-out;  
transition: all 0.8s ease-in-out;  
}  
#social img:hover {  
-moz-transform: rotate(360deg);  
-webkit-transform: rotate(360deg);  
-o-transform: rotate(360deg);  
-ms-transform: rotate(360deg);  
transform: rotate(360deg);  
}  
.social {text-align: center;margin: 10px;}
Социальные иконки с эффектом  вращения
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: Turbo
Комментарии (0)
Добавить комментарий
class="add-comm-form clearfix add-shadow2" id="add-comm-form">
avatar