3D перетворення та анімація CSS
З кожним уроком приклади, які ми робимо, стають все складнішими і складнішими. У першому уроці ми подивилися як можна створити просту картинку, що обертається. У другому ми трохи ускладнили і додали кілька зображень, що обертаються — вийшла карусель з новин. Насправді CSS надає нам величезні можливості для створення анімації. Звичайно, не завжди такі приклади можна знайти на веб-сайтах. Адже мало хто використовує їх. Але чому б вам не виділиться і не зробити першим якусь привабливу анімацію на своєму сайті. Нехай на одній сторінці, але це вже виділить вас серед решти сайтів.
Що може 3D перетворення?
Два попередні уроки, в яких розглянуто простіші приклади роботи з анімацією на CSS:
Куб, що обертається — Приклад
Для початку погляньте на приклад того, що ми створюватимемо крок за кроком:
Куб обертається і на кожній він на деяке зупиняється.
Структура HTML
На кожну сторону куба нам потрібно створити окремий блок
Замість цифр ви можете написати який-небудь текст або вставити зображення. Дивлячись навіщо і де захочете застосувати цей елемент.
А що ж у CSS?
Спочатку давайте розберемося з ключовими кадрами. Їх лише 6, тому що у нас всього 6 сторін у куба. У CSS, щоб задати стільки ключових кадрів, необхідно використовувати відсотки. Тобто коли анімації що треба показати. Давайте подивимося як це виглядає без префіксів:
Ще раз хочу помітити, що я не використовую префікси, тому що через них код вийде дуже громіздким.
Далі визначаємо стиль для сцени або контейнера, в якому знаходиться куб:
Знову ж таки весь код без префіксів-webkit-, -moz-, -ms-.
Залишилося задати обертання кожної сторони:
Ось і весь "страшний" код. Завантажити готовий приклад ви можете за посиланням:
Ну, хіба це не вражає? На мій погляд, дуже класний ефект. І все це без використання Javascript, хоч і доведеться трохи напружити свій мозок. Але зовсім трохи 🙂 !
Наступний урок буде ще цікавішим, нехай і складнішим. Там ми побачимо як можна «керувати» м'ячиком 😉 .