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

З кожним уроком приклади, які ми робимо стають все складніше і складніше. У першому уроці ми подивилися як можна створити просту обертову картинку. У другому ми трохи ускладнили і додали кілька обертових зображень - вийшла карусель з новин. Насправді CSS надає нам величезні можливості при створенні анімації. Звичайно, не завжди такі приклади можна знайти на сайтах. Адже мало хто використовують їх. Але чому б вам не виділиться і не зробити першим якусь привабливу анімацію на своєму сайті. Нехай на одній сторінці, але це вже виділить вас серед інших сайтів.

Що можуть 3D перетворення?

Два попередніх уроку, в яких розглянуті більш прості приклади роботи з анімацією на CSS:

• 3D перетворення і анімація CSS - Урок 1. Обертання
• 3D перетворення і анімація CSS - Урок 2. Карусель новин

Обертається куб - Приклад

Для початку погляньте на приклад того, що ми будемо створювати крок за кроком:

Куб обертається і на кожній він на деякий зупиняється.

Чи не бачите, що обертається куба? Не біда - дивіться відео як він повинен обертатися:

структура HTML

На кожну з сторін куба нам потрібно створити окремий блок:

12345678910

lt;div class="Stage" style="Width: 120px; height: 120px;"gt;lt;div class="Cubespinner"gt;lt;div class="Face1"gt; 1lt;/divgt;lt;div class="Face2"gt; 2lt;/divgt;lt;div class="Face3"gt; 3lt;/divgt;lt;div class="Face4"gt; 4lt;/divgt;lt;div class="Face5"gt; 5lt;/divgt;lt;div class="Face6"gt; 6lt;/divgt;lt;/divgt;lt;/divgt;

Замість цифр ви можете ви можете написати якийсь текст або вставити зображення. Дивлячись для чого й де захочете застосувати даний елемент.

А що ж в CSS ...

Для початку давайте розберемося з ключовими кадрами. Їх всього 6, тому що у нас всього 6 сторін у куба. В CSS щоб задати стільки ключових кадрів необхідно використовувати відсотки. Тобто в який момент анімації що потрібно показати. Давайте подивимося як це виглядає без префіксів:

1234567891011121314151617181920

@keyframes spincube {from,to {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)-}16% {transform: rotateY(-90deg)-}33% {transform: rotateY(-90deg) rotateZ(90deg)-}50% {transform: rotateY(-180deg) rotateZ(90deg)-}66% {transform: rotateY(-270deg) rotateX(90deg)-}83% {transform: rotateX(90deg)-}}

Ще раз хочу зауважити що я не використовую префікси бо через них код вийде дуже громіздким.

Далі визначаємо стиль для сцени або контейнера, в якому знаходиться куб:

12345678

.cubespinner {animation-name: spincube-animation-timing-function: ease-in-out-animation-iteration-count: infinite-animation-duration: 12s-transform-style: preserve-3d-transform-origin: 60px 60px 0-}

Знову ж весь код без префіксів -webkit-, -moz-, -ms-.

Залишилося поставити обертання для кожної сторони:

123456789101112131415161718192021222324252627282930313233343536

.cubespinner div {position: absolute-width: 120px-height: 120px-border: 1px solid # 8ECBDE-background: rgba(255,255,255,0.6)-box-shadow: inset 0 0 20px # 8ECBDE-line-height: 120px-text-align: center-font-size: 100px-color:# 55BEDE-}.cubespinner .face1 {transform: translateZ(60px)-}.cubespinner .face2 {transform: rotateY(90deg) translateZ(60px)-}.cubespinner .face3 {transform: rotateY(90deg) rotateX(90deg) translateZ(60px)-}.cubespinner .face4 {transform: rotateY(180deg) rotateZ(90deg) translateZ(60px)-}.cubespinner .face5 {transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px)-}.cubespinner .face6 {transform: rotateX(-90deg) translateZ(60px)-}

Ось і весь «страшний» код. Завантажити готовий приклад ви можете по посиланню нижче:

завантажити

висновок

Ну хіба це не вражає? На мій погляд дуже класний ефект. І все це без використання javascript, хоч і доведеться трохи напружити свій мозок. Але зовсім трохи # 128578; !

наступний урок буде ще цікавіший, нехай і складніше. Там ми подивимося як можна «керувати» м`ячиком # 128521; .

Успіхів!

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