3D преобразования и анимация CSS — Урок 3. Вращающийся куб

С каждым уроком примеры, которые мы делаем становятся всё сложнее и сложнее. В первом уроке мы посмотрели как можно создать простую вращающуюся картинку. Во втором мы немного усложнили и добавили несколько вращающихся изображений — получилась карусель из новостей. На самом деле CSS предоставляет нам огромные возможности при создании анимации. Конечно, не всегда такие примеры можно найти на сайтах. Ведь немногие используют их. Но почему бы вам не выделится и не сделать первым какую-нибудь привлекательную анимацию на своём сайте. Пусть на одной странице, но это уже выделит вас среди остальных сайтов.

Что могут 3D преобразования?

Два предыдущих урока, в которых рассмотрены более простые примеры работы с анимацией на CSS:

• 3D преобразования и анимация CSS — Урок 1. Вращение
• 3D преобразования и анимация CSS — Урок 2. Карусель новостей

Вращающийся куб — Пример

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

Куб вращается и на каждой он на некоторое останавливается.

Не видите вращающегося куба? Не беда — смотрите видео как он должен вращаться:

Структура HTML

На каждую из сторон куба нам нужно создать отдельный блок <div>:

1
2
3
4
5
6
7
8
9
10

<div class="stage" style="width: 120px; height: 120px;"> 
    <div class="cubespinner"> 
        <div class="face1">1</div> 
        <div class="face2">2</div> 
        <div class="face3">3</div> 
        <div class="face4">4</div> 
        <div class="face5">5</div> 
        <div class="face6">6</div> 
    </div> 
</div>

Вместо цифр вы можете вы можете написать какой-нибудь текст или вставить изображение. Смотря для чего и где захотите применить данный элемент.

А что же в CSS…

Для начала давайте разберемся с ключевыми кадрами. Их всего 6, потому что у нас всего 6 сторон у куба. В CSS чтобы задать столько ключевых кадров необходимо использовать проценты. То есть в какой момент анимации что нужно показать. Давайте посмотрим как это выглядит без префиксов:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

@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);
    }
}

Еще раз хочу заметить что я не использую префиксы, потому что из-за них код получится очень громоздким.

Далее определяем стиль для сцены или контейнера, в котором находится куб:

1
2
3
4
5
6
7
8

.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-.

Осталось задать вращение для каждой стороны:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.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, хоть и придется немного напрячь свой мозг. Но совсем чуть-чуть 🙂 !

Следующий урок будет еще более интересный, пусть и сложнее. Там мы посмотрим как можно «управлять» мячиком 😉 .

Успехов!

С Уважением, Юрий Немец