3D перетворення і анімація css - урок 1. Обертання

Внаслідок того, що CSS розвивається стрімкими темпами і створювати анімацію стало ще простіше без використання javascript на багатьох сайтах з`явилися дуже цікаві елементи, якими не можна не зацікавитися. У сьогоднішньому уроці ми подивимося як можна створювати анімацію за допомогою ключових кадрів (це ще цікавіше ніж просто за допомогою CSS перетворень). Також наша анімація буде знаходиться не просто в одній площині, а буде з ефектом 3D. Якщо ви не знаєте для чого і де можна застосувати такий ефект - переходите в повну новину і там я вам про це розповім.

Сьогодні ми йдемо далі у вивченні CSS анімації. Тому рекомендую вивчити попередні уроки «Анімація за допомогою CSS перетворень» (ця анімація значно простіше, а вивчивши її - тут ви також з легкістю все зрозумієте # 128578; ):

• Анімація за допомогою CSS перетворень. Частина 1 - введення
• Анімація за допомогою CSS перетворень. Частина 2 - реальний приклад
• Анімація за допомогою CSS перетворень. Частина 3 - просунута анімація

Якщо CSS перетворень з попередньої серії уроків працювали в браузерах Firefox, Chrome, Safari і Internet Explorer 10+, то в при створенні 3D анімації вона буде працювати тільки в WebKit браузерах і браузері Mozilla. Найпростіші перетворення працюватимуть і в IE10, але щось більш складне - немає, так як цей браузер не підтримує параметр preserve-3d для створення 3D шарів.

анімація CSS

Анімація, яку ми створимо буде містити в собі зображення, яке обертається навколо осі Y:

Для тих, у кого немає анімації # 128521; :

трохи HTML

Все зрозуміло і просто в HTML структурі:

123

lt;div id="Stage"gt;lt;p id="Spinner"gt; Класно ?!lt;/pgt;lt;/divgt;

Ключові кадри CSS

Що таке ключові кадри?

У блоці @keyframes знаходиться ряд правил, які називаються ключовими кадрами. Ключові кадри містять властивості, які застосовуються в певний момент часу при анімації. При анімації значення інтерполюються ( «плавно переходять» від одного значення до іншого) і ми бачимо лише плавний перехід.

Вам це може здатися важким, але це один з найпростіших прикладів.

Визначимо початковий і кінцевий ключовий кадр:

1234567891011121314151617181920212223

/ * WebKit і Opera * /@ -webkit-keyframes spinner { from {-webkit-transform: rotateY(0deg)-}to {-webkit-transform: rotateY(-360deg)-}}/ * Всі інші браузери * /@keyframes spinner { from {-moz-transform: rotateY(0deg)--ms-transform: rotateY(0deg)-transform: rotateY(0deg)-}to {-moz-transform: rotateY(-360deg)--ms-transform: rotateY(-360deg)-transform: rotateY(-360deg)-}}

Крім ключових кадрів нас також цікавить @keyframes spinner, де ми вказуємо на що будемо посилатися при анімації пізніше, а саме на spinner.

створюємо сцену

Нам потрібен елемент, в якому наша анімація знайшла б обсяг і з`явився ефект обсягу. Сцена, на відміну від обертового зображення, зафіксована на сторінці.

Для сцени ми будемо використовувати нове для нас властивість perspective, яке надає глибину. Значення задається в пікселях. Воно визначає відстань від користувача до елементів в перспективі. Знаю, це складно відразу зрозуміти # 128578; . Давайте зменшимо з 1200px до 300px і погляньте на результат нижчий:

А також відео:

Пов`язуємо анімацію з елементом

Зараз ви побачите ще кілька нових властивостей. І я навіть не хочу вас відразу змушувати їх запам`ятовувати відразу і розбиратися в значеннях. Можна вчинити інакше: ви просто на них подивіться і що зрозумієте, то зрозумієте. Насправді, вивчаючи далі уроки ви будете зустрічати їх часто і почнете розуміти для чого вони. Тому не хвилюйтеся на рахунок того, що їх багато і ви не знаєте і не розумієте щось!

А властивості такі:

1234567891011121314151617181920212223242526272829

#spinner {width: 250px-height: 290px-background: url(`Http://sitehere.ru/wp-content/uploads/2014/10/baby-l1.jpg`) no-repeat-text-align: center-color: #fff-margin:0 auto--webkit-animation-name: spinner--webkit-animation-timing-function: linear--webkit-animation-iteration-count: infinite--webkit-animation-duration: 6s-animation-name: spinner-/ * Вказуємо на ключові кадри анімації з назвою "spinner" * /animation-timing-function: linear- / * Функція синхронізації, за допомогою якої будуть відбуватися перетворення * /animation-iteration-count: infinite- / * Кількість повторів анімації. "Infinite" - значить нескінченно * /animation-duration: 6s- / * Тривалість анімації * /-webkit-transform-style: preserve-3d--moz-transform-style: preserve-3d--ms-transform-style: preserve-3d-transform-style: preserve-3d- / * Вказуємо що це 3D перетворення * /}#spinner: hover {-webkit-animation-play-state: paused-animation-play-state: paused- / * Зупиняємо анімацію * /}

Я підписав властивості без префіксів, тому що ті виконують аналогічні функції, тільки для інших браузерів. Також хочу зауважити що ми зупиняємо анімацію за допомогою спеціального властивості animation-play-state при наведенні на зображення.

висновок

Можливо і зараз хто-небудь може сказати «А де ж я на своєму сайті можу застосувати цей ефект?». Перше що спало мені на думку - це оповіщення про будь-яку подію. Погодьтеся, коли щось обертається, та ще й так красиво, воно обов`язково привернуть увагу!

Ви можете змінити обертання, редагуючи градуси в ключових кадрах і дивуватися як це легко і, в цей же час, дуже красиво.

Слідкуйте за оновленнями на сайті, щоб не пропустити наступний урок, в якому ми створимо галерею зображень. Ви здивуєтеся що це також не так і складно!

Успіхів!

З повагою, Юрій Німець