3d перетворення і анімація css

Продовжуємо вивчати анімацію, яку можна створити за допомогою технології CSS3. Нагадаю, що на відміну від минулого серії уроків присвячених анімації за допомогою CSS перетворень, тут ми розглядаємо анімацію за допомогою ключових кадрів і 3D перетворень. Вона трохи складніше, ніж в минулих уроках, а й виглядає ефектніше. Перед вивченням даного уроку рекомендую обов`язково вивчити попередній урок, де ми створювали анімацію обертання зображення навколо осі Y. Там, на простому прикладі, я розглянув як створюється анімація за допомогою ключовими кадрами.

На попередню статтю з даного уроку можна потрапити перейшовши за посиланням нижче:

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

Браузери Internet Explorer 10 і 11 не підтримують властивість preserve-3d, тому в цих браузерах ви не побачите 3D ефекту.

Карусель новин - Приклад

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

Подивитися прімерСкачать

На кожне зображення можна натиснути і ви потрапите на відповідну статтю на сайті.

Якщо ви не бачите у вашому браузері галерею фотографій - дивіться відео нижче як це має виглядати:

структура HTML

Давайте подивимося що і як влаштовано всередині.

Для початку зверніть увагу HTML:

123456789

lt;div class="Stage" style="Margin: 150px auto- height: 142px; width: 500px"gt;lt;div class="Spinner" style="-webkit-transform-origin: 180px 0 0- -moz-transform-origin: 180px 0 0- -ms-transform-origin: 180px 0 0-transform-origin: 180px 0 0;"gt;lt;a href="Http://sitehere.ru/3d-preobrazovaniya-i-animacii" target="_blank" title="3D перетворення і анімація CSS - Урок 1. Обертання"gt; lt;img style="-webkit-transform: rotateY (0deg) translateX (180px) - moz-transform: rotateY (0deg) translateX (180px) - transform: rotateY (0deg) translateX (180px) - padding: 0 0 0 160px;" src="Http://sitehere.ru/wp-content/uploads/2014/10/image1.jpg" width="200" height="130" alt=""gt; lt;/agt;lt;a href="Http://sitehere.ru/animaciya-s-pomoshhyu-css-preobrazovanij-chast-3-prodvinutaya-animaciya" target="_blank" title="Анімація за допомогою CSS перетворень. Частина 3 - просунута анімація"gt; lt;img style="-webkit-transform: rotateY (-72deg) translateX (180px) - -moz-transform: rotateY (-72deg) translateX (180px) -transform: rotateY (-72deg) translateX (180px) - padding: 0 0 0 147px; " src="Image2.jpg" width="213" height="130" alt=""gt; lt;/agt;lt;a href="Http://sitehere.ru/animaciya-s-pomoshhyu-css-preobrazovanij-chast-2-realnyj-primer" target="_blank" title="Анімація за допомогою CSS перетворень. Частина 2 - реальний приклад"gt; lt;img style="-webkit-transform: rotateY (-144deg) translateX (180px) - -moz-transform: rotateY (-144deg) translateX (180px) -transform: rotateY (-144deg) translateX (180px) - padding: 0 0 0 120px; " src="Image3.jpg" width="240" height="130" alt=""gt; lt;/agt;lt;a href="Http://sitehere.ru/animaciya-s-pomoshhyu-css-preobrazovanij-chast-1-vvedenie" target="_blank" title="Анімація за допомогою CSS перетворень. Частина 1 - введення"gt; lt;img style="-webkit-transform: rotateY (-216deg) translateX (180px) - -moz-transform: rotateY (-216deg) translateX (180px) - transform: rotateY (-216deg) translateX (180px) - padding: 0 0 0 147px; " src="Image4.jpg" width="213" height="130" alt=""gt; lt;/agt;lt;a href="Http://sitehere.ru/animirovannye-shapki-dlya-sajta" target="_blank" title="Анімовані шапки для сайту"gt; lt;img style="-webkit-transform: rotateY (-288deg) translateX (180px) - -moz-transform: rotateY (-288deg) translateX (180px) - transform: rotateY (-288deg) translateX (180px) - padding: 0 0 0 122px; " src="Image5.jpg" width="238" height="130" alt=""gt; lt;/agt;lt;/divgt;lt;/divgt;

Якщо це записати ще простіше, тоді вдасться наступний код:

lt;div class="Stage"gt;lt;div class="Spinner"gt;lt;agt; lt;imggt; lt;/agt;lt;/divgt;lt;/divgt;

Залишився лише CSS

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

Давайте подивимося на весь CSS цілком:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364

/ * Стилі для контейнера каруселлю * /.stage {margin: 1em auto--webkit-perspective: 1200px--moz-perspective: 1200px-perspective: 1200px-}/ * "Зв`язуємо" контейнер з ключовими кадрами і задаємо її налаштування * /.spinner {-webkit-animation-name: spinner--webkit-animation-timing-function: linear--webkit-animation-iteration-count: infinite--webkit-animation-duration: 6s-animation-name: spinner-animation-timing-function: linear-animation-iteration-count: infinite-animation-duration: 6s--webkit-transform-style: preserve-3d--moz-transform-style: preserve-3d--ms-transform-style: preserve-3d-transform-style: preserve-3d-}/ * Зупиняємо обертання при наведенні * /.spinner: hover {-webkit-animation-play-state: paused--moz-animation-play-state: paused-animation-play-state: paused-}/ * Стилі для кожного зображення * /.spinner img {position: absolute-border: 1px solid #ccc-background: rgba(255,255,255,0.8)-box-shadow: inset 0 0 20px rgba(0,0,0,0.2)-}/ * Ключові кадри - WebKit браузери * /@ -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)-}}

Як бачите, ключові кадри тут такі ж як в минулому уроці.

висновок

Цікавий спосіб показу своїх новин на сайті. Але це я використовував для показу новин - ви ж можете таким чином показати просто зображення і використовувати цю карусель як незвичайну галерею.

Експериментуючи з різними параметрами ви можете підібрати ту швидкість і кут (перспективу), яка вас влаштовує. Нічого складного - вам лише потрібно змінювати параметри і дивитися в браузері що виходить. Так ви набагато швидше зрозумієте що і за що відповідає.

наступний урок буде про те, як створити обертається куб, який буде повертатися за певним алгоритмом.