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

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

Структура HTML

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

<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 чтобы задать столько ключевых кадров необходимо использовать проценты. То есть в какой момент анимации что нужно показать. Давайте посмотрим как это выглядит без префиксов:

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

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

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

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

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

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

 
Пример:

See the Pen Вращающийся куб by vavik (@vavik96) on CodePen.

Источник