Доброго вам дня. 🙂
Відвідуючи чужі сайти Ви могли помітити цікавий ефект, наприклад, на тих же іконах розповісти в соцмережах, при наведенні, вони повертаються за годинниковою стрілкою. Такий ефект дуже цікавий, непростий і досить помітний. Поки писав статтю вирішив і собі його встановити 🙂
Для того щоб здійснити задумане, нам знадобиться два параметра CSS.
- transition - параметр, який задасть час анімації.
- transform - параметр, який створить анімацію і буде обертати іконки.
І так, нам треба визначиться з тим елементом, який ми будимо повертати. Потім поставити йому клас або ж якщо клас вже заданий, дописати наступні стилі. У нашому випадки клас у елемента - .block.
Просто елементу задаємо параметр transition. Задаються багато разів, для кросбраузерності - -moz-transition, -webkit-transition, -o-transition, -ms-transition, transition.
У всіх одне значення - 0.8s. що означає, що анімація триватиме 0,8 секунди. Так що можете змінювати, щоб прискорити або уповільнити ефект.
Елементу при наведенні (властивість -: hover) - задаємо параметр transform. Він теж задається багато разів для кросбраузерності і має значення - 360deg. Це градуси, на які буде повернуто зображення. 360 - тобто повний оборот, якщо хочете задати не повний оборот, можете зменшити значення.
Тепер Ви можете обертати будь-який елемент, задаючи йому цікавий ефект.
На цьому все, спасибі за увагу. 🙂
Якщо Вам був корисним моя праця, можете підтримати сайт :)
Привіт дорогий друже
У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце