Лого www.SiteHere.ru

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

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

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

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

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

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

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

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
Технологии не поддаются обучению?
18 комментариев к записи
  • denya

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

     
    • Юрий

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

       
  • Вика

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

     
    • Юрий

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

       
      • Алексей

        Здравствуйте, Юрий.

        У меня к вам большая просьба, если можете то просьба ответить на Email. Мне необходимо, чтобы куб вращался в другом направлении, т.е не налево, а направо. Сам css знаю, но не очень хорошо, а у вас на сайте много чего полезного, вот и хотел бы применить куб на будующем сайте. Буду очень признателен за вашу помощь.

        C уважением. Алексей.

         
        • Юрий Немец

          Добрый день, Алексей.

          Чтобы изменить вращение, необходимо изменить значение CSS свойств, которые отвечают за поворот куба. Все они имеют похожие свойства: rotateY, rotateZ, rotateX. Но еще есть перемещение translateY и translateX, которое необходимо задавать при вращении, его также необходимо будет поправить. Но проще всего сделать это путем экспериментов. Таким образом вы найдете оптимальные настройки для своего куба.

           
          • Алексей

            Доброе время суток, Юрий

            Спасибо за ответ, все что вы написали я конечно знаю и пробовал реализовать самостоятельно, но не получается. Казалось бы поменять значения на противоположные по значению и все буде работать, но нет. Пытался решить, даже интересно стало как это реализовать, вроде что проще чтобы куб вращался в другом направлении, все свойства уже есть, но не все так просто. К сожалению, мои эксперименты ни к чему не привели (:

             
            • Алексей

              Юрий, доброе время суток.

              Большая к Вам просьба помочь, так как сам бился бился, но не получается, к сожалению. Нужно, как я писал чтобы куб вращался не налево, а направо. Ваши советы я принял к сведению, но реализовать не получается, поэтому и обращаюсь к вам за помощью, учитывая ваш опыт. Будьте добры, если нетрудно посмотрите что можно сделать, буду благодарен.

              С уважением, Алексей

               
          • Алексей

            Юрий, доброе время суток.

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

            Код:

            @keyframes spincube { /*cube*/
                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);
                }
            }

            .cubespinner.face1 {transform: translateZ(10px);}
            .cubespinner .face2 {transform: rotateY(-90deg) translateZ(10px);}
            .cubespinner .face3 {transform: rotateY(90deg) rotateX(90deg) translateZ(10px);}      
            .cubespinner .face4 {transform: rotateY(180deg) rotateZ(90deg) translateZ(10px);}      
            .cubespinner .face5 {transform: rotateY(90deg) rotateZ(-90deg) translateZ(10px);}   
            .cubespinner .face6 {transform: rotateX(90deg) translateZ(10px);}

            Был бы признателен за вашу помощь. С уважением, Алексей.

             
          • Алексей

            Юрий, здравствуйте. Простите, что вам надоедаю но не получается реализовать, чтобы куб вращался не налево как в примере, а направо.
             Уже со всеми свойствами "познакомился" много раз экспериментировал,  но не выходит, менял значения на отрицательные, пробовал делать (один из примеров)

            body {
              margin: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              height: 100vh;
              perspective: 500px;
            }
            .cubespinner {
              width: 120px;
              height: 120px;
              transform-style: preserve-3d;
              transform-origin: center center;
              animation: spincube 10s infinite;
            }
            .cubespinner div {
              position: absolute;
              width: 120px;
              height: 120px;
              background: rgba(255,255,255,.6);
              box-shadow: inset 0 0 20px #8ECBDE, 0 0 2px white;
              line-height: 120px;
              text-align: center;
              font-size: 30px;
              color: #55BEDE;
            }
            .front {transform: translateZ(60px);}
            .back {transform: translateZ(-60px) rotateX(180deg);}
            .top {transform: translateY(-60px) rotateX(90deg);}
            .bottom {transform: translateY(60px) rotateX(-90deg);}
            .left {transform: translateX(-60px) rotateY(-90deg);}
            .right {transform: translateX(60px) rotateY(90deg);}
            @keyframes spincube {
            16% {transform: rotateY(90deg);}    
            33% {transform: rotateY(90deg) rotateZ(-90deg);}    
            50% {transform: rotateY(180deg) rotateZ(-90deg);}    
            66% {transform: rotateX(90deg) rotateZ(-90deg);}    
            83% {transform: rotateX(90deg) rotateZ(0deg);}
            100% {transform: rotateX(0deg) rotateZ(0deg);}
            }

            в этом примере, вращение направо, но показываются 4 грани, да и текст повернут на 90, пытаюсь добиться чтобы как у вас в примере, куб также вращался только не налево а направо.

            нужно для того, что будет 2 куба, один будет вращаться налево, а другой направо, вот и пытаюсь решить уже несколько дней или недель, сам самоучка делаю все сам по возможности, а вот тут без вашей помощи не получается.

            Будет у вас время гляньте, что не так, как "заставить" куб вращаться направо.

            С уважением, Алексей

             
          • Алексей

            Юрий,здравствуйте.

            Проверил в работе вращение куба. В Мozilla — все хорошо, а в Chrome и Opera на 5 шаге неправильное вращение. Как исправить данный момент ? Заранее благодарен.

             
  • Вика

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

     
  • 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 не будет опубликован. Обязательные поля помечены *