Лого www.SiteHere.ru

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

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

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

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

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

PDF отчет

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

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

1
2
3
4
5
6

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

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

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

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

Успехов!

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

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

Из чего состоит любой сайт? HTML
+
CSS
+
JS
Технологии не поддаются обучению?
Комментарии (11) к записи
  • denya

    дайте
    .stage{
    perspective: 800px;
    }

     
    • Юрий

      Спасибо, Денис! Благодаря этому свойству получится красивая фронтальная перспектива. На видео ниже видна разница между значениями перспективы:

       
  • Вика

    Юрий, я только начинаю изучать эти удивительные возможности CSS. Затягивает невероятно. С кубом вариант супер. 😎

     
    • Юрий

      Виктория, я рад что вам нравится изучать технологию CSS, ведь возможностей в CSS стало еще больше и о них необходимо знать! :)

       
  • Вика

    Спасибо, Юрий. Подписалась на рассылку. Буду дерзать. ➡

     
  • Simeon Vassilev

    Urok ponravilsya.Mne ochen silno interesuet a mozhet li etot sposob primenit k sozdaniu animacii s tekst vraqshaiushiisya vokrug zeemnogo shara.Ya sam pensioner i menya dolgo zanimaet kak hobi kak sdelat na moem PC effekt vrashenia i teksta i zemnoj shar/globe/
    Budu rad s Vami poobshatsya po etim voprosom
    S bolshim uvazheniem : Doc.D-r ing.Simeon Vassilev Sofia Bg. Vladeiu english i ruskii yazik
    P.S.
    Kogda okanchival svoe vishee obrazovanie v USSR PC ne bili/a eto bilo v 1970 g./

     
  • Андрей

    в эксплорере не работает, в файерфокс глючит 😥

     
    • Юрий

      Андрей, какой версии у вас Firefox? У меня Firefox 33.0 и эти видео-примеры я снимал именно в этом браузере. Как видите, ничего не тормозит :) .

       
  • Андрей

    У меня Firefox 33.1 куб пропадает и дергается. А в эксплорере вообще плоскость, а не куб. Что делать с эксплорером?

     
  • orenkomp.ru

    Эта великолепная анимация представляет собой вращающуюся колонку с крутящимися рядами цветных коробочек с текстом.

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *