Иконки социальных сетей с эффектом при наведении

И снова здравствуйте! Осталось несколько часов к решающему матчу для сборной Португалия против команды США, но чтобы время не терять опубликую запись, которая уже два месяца "валялась" в черновиках.

Не буду напоминать, насколько социальные сети важны для работы с посетителями/пользователями. Но как же привлечь юзера, чтобы тот кликнул по иконке какой-то соц. сети и перешел к Вам в группу? Правильно - любят глазами, то бишь визуально. 

Смотреть демо "Иконки социальных сетей с эффектом при наведении"

Итак, сегодня мы поработаем с эффектом вращения изображения на 360* градусов. Для этого используется свойство для hover transform: rotate(360deg).

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;
}
/* Поворот на 360 градусов при наведении курсора*/
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

Чтобы не прописывать эффект каждому изображению, мы просто заключаем все картинки в отдельный div.

HTML:

<div id="social">
<a target="_blank" rel="nofollow" href="http://facebook.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzce5DxCtDvdiIdG5vcj8HkMKMe2PkyO5sKuXBKat0PZi9HBWU0toQW6PiHidnryHYP8YphYD3_p9ORIcYM1oNvKhjstzntIt7M1Is-wD0WaB3EniaD0IXpxBwduPmDWhwbEQuPXRmYQk/s320/facebook.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://google.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW_NIwh5rXvRBZvDJJC508o61zZlwsSgyZ-J4W6bACi6xLoQ5EhPTqQE_1D6sxQQURexdSZX1iZVzuWxLNo5R5wD3cXhdNS6Q4VGtLN4tp7QuuF8_qljT2guRw01WCY2R6aEfiNljO-GI/s320/google_plus.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://instagram.png">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxBXNsqem7VIW0I1Avd4Er4AlTNaA_KWlOkl7GXQ8CLMg7F5I2CVGGntfdWylRrfJNdhpzAz03fHClCqPUxBQe4ykAip56x5Wn5ELk2CFq9A3_kj2inji0Xo4wfZI-G_cSuaaC1wR5eaA/s320/instagram.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://linkedin.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ssPBs16HOa0AXuco10UTtea_xiofd8_xzntxSSNkOZp52PwTZ8etT01Z2OrBbhIkw0FkTtbFZjn251yfofifvwccNZxdq1ReHGxZR3rgUT41oyev_6QtHEtB0ctyDND8uCUjyneHU9I/s320/linkedin.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://gmail.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUQ3uoh8gBvQ615LjykoTIkRh7POE18XisKcQWNEWRomfZc9gM4-sMsHr2xWrDV9WhoWRwFXuUdt_oevwF_BVGS9dCcbuWgl0EN7TZL6CApQ5xsr6SndrGUqjlqUTNi8LO3s-LaaN1kAI/s320/mail.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://odnoklassniki.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWs7iLwd4t-JoUPmGy98onpNPycrQkxg7dzB8VImVlmSHB_i47eboyRWnnfnzDgGzL2cbSOfOmu6nHB0W2Yh3NfUAP1gQXfNW7q9oVFLTBxp5XAVKXoilmV01u8rmj3B2yopWHh6VK9h8/s320/odnoklassniki.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://feedburner.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH0m4wiGMPwa4Oo_9iqxpUj_MYYmbTj14uabYsfXpwqoAq1kMUICBEcaCvyc6M8iIY3cPuKiNZSDnB82JBUUXs27M7g0_8Rfk3ioOK1hDYxZkkuH9Ot42Y78S0ZJF6s4ZgqlSMm4dfJDk/s320/rss.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://vk.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWYDhNZnyAojHxmXJpQOMFjxIirzlC_tD7CniA5xbBKB9gEHjNbGcWIqiRujAzCIRdzphGwLRILPJiVv4FnMCaaBirt-j78ayT1BBI1xbMunsLAc13I8W8R3Cr4GxYbFAmH3SV1UHkzfY/s320/vk_2.png"style="margin-right: 1px;" /></a>
<a target="_blank" rel="nofollow" href="http://youtube.com">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1WvAxOmy_CUfqPLBYeS6Ow_qQNCBXCgmuyP8uKQD8mAbfh1eTSPJTYxa5lizjqm_xOL_6qYqFdthM-P27cTlNT4vYmTuBmMNKWYW-5RUkgdIn7Rn0wU9OBodO5OVhPPRq__JD8g0IBeM/s320/youtube_2.png"style="margin-right: 1px;" /></a>
</div>

Очень круто смотрится этот эффект на круглых иконках. Для этого просто сделайте или найдите круглые иконки социальных сетей и поменяйте адреса на них. Посмотрите, что выйдет!

Кстати, не забудьте поменять ссылки на ваши профили ;)
На этом, всем приятного вечера и окончания выходных! Свои вопросы оставляйте в комментах ниже!. До встречи ;)