ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Заставляем картинки крутиться.Вращяюшиеся соц.кнопки

.

kartinkaДоброго всем времени суток!
На очереди новый информативный урок!
Сегодня мы научимся заставлять любое изображение на нашем сайте вращаться. Для этого нам понадобится простой код, который я предоставлю чуть ниже!
Вращение картинок, изображений, иконок социальных сетей смотрится очень красиво. К примеру слева, внизу статьи я добавил иконки социальных сетей в контакте и одноклассники. Прошу Вас посетить мой страницы и вступить в мою группу в vk.com
Наведите курсор на данные иконки и посмотрите на результат. Как видим иконки, при наведение курсора вращаются на 360 градусов, по часовой стрелке. Также я объясню, как заставить иконки вращаться на 180 и 90 градусов. Так что вперед.
Для того чтобы заставить изображение вращаться нам в первую очередь понадобится сама картинка. Закачайте ее на свой сайт. О том как добавлять изображение на свой сайт читайте в статье-добавление изображений и видео на сайт.
Вращение на 360 градусов
Для того чтобы заставить изображение крутиться на 360 градусов по часовой стрелке нам потребуется следующий код:

Не забываем указывать размеры изображений! Картинок может быть любое количество. Вставляем код в любое место нашего сайта и наблюдаем вращение по часовой стрелке на 360 градусов. Для того чтобы заставить изображение вращаться на 180 или же 90 градусов, необходимо в предоставленном коде заменить все цифры 360, на необходимое значение. Места где необходимо произвести изменения я пометил в коде. Вот пример вращения с активными ссылками:

(или же rotateimg180,rotateimg90)

odnoklas


vkon

Надеюсь статья была вам полезна.
Жду комментариев к данной статье, лайков и плюсиков в социальных сетях. Рекомендую Вам заставить и ваши кнопки социальных сетей вращаться.
Если возникли вопросы по коду то пишите их здесь или же задавайте в форме обратной связи. До новых встреч.
БЕРЕГИТЕ СЕБЯ!

Дополнение от 09,11,2016 года. Более простой вариант!!!

Привожу очень интересный эффект ротации картинок при наведении, проще говоря это вращение картинки. Причем реализуется этот эффект без использования скриптов, на СSS. Хотя это может быть не только изображение, а такие элементы как ссылка, или блок div.

Если немного пофантазировать, то данный hover вращения можно применять в каких-то своих проектах . В основном используются в лендингах.
Картинки можно оборачивать в ссылки и делать их кликабельными, получится что-то вроде вращающихся кнопок.

Вращение, ротация картинки, код CSS и HTML

А вот и реализация данного hover эффекта вращения картинок. Для начала привожу CSS код:

transition-duration: 0.8s — вращение происходит за 0.8 секунд.
rotate(360deg) — понятно, что картинка вращается на 360 градусов.

Просто приcвойте класс .rotate или назовите его как хотите. Я привожу HTML код, присвоенный картинке: 

Ну вот и все друзья! Второй способ  более прост и позволит вам добавлять крутящиеся изображения очень быстро.

БЕРЕГИТЕ СЕБЯ!

 




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

4 комментариев к записи Заставляем картинки крутиться.Вращяюшиеся соц.кнопки

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *