Анимированный 3D куб на Css

3d преобразования, переходы, вращения и анимации являются самыми новыми и интересными свойствами CSS3. Вы можете использовать их, чтобы выделить и украсить ваш сайт .
В этом уроке мы рассмотрим простой и приятный анимированный 3D куб, затем добавим дополнительный эффект, чтобы сделать куб разбирающимся при наведении на него курсора мыши и собирающимся снова.
Так как мы будем использовать исключительно CSS3, это будет работать только в браузерах, которые поддерживают CSS анимации и 3D-преобразования. Прежде всего, давайте взглянем на HTML – разметку:

<div class="wrap">
  <div class="cube">
    <div class="front">
      Front side
    </div>
    <div class="back">
      Back side
    </div>
    <div class="top">
      Top side
    </div>
    <div class="bottom">
      Bottom side
    </div>
    <div class="left">
      Left side
    </div>
    <div class="right">
      Right side
    </div>
  </div>
</div>

Теперь посмотрим CSS:

Первая часть позволяет установить 3D вид в перспективе для дочерних элементов:

.wrap {
  margin-top: 150px;
  perspective: 1000px;
  perspective-origin: 50% 50%;
}

У нас есть шесть Div, представляющих из себя шесть сторон куба, эти Div будут иметь абсолютное положение и иметь внутри DIV с относительным позиционированием.

.cube {
  margin: auto;
  position: relative;
  height: 200px;
  width: 200px;
  transform-style: preserve-3d;
}

.cube > div {
  position: absolute;
  box-sizing: border-box;
  padding: 10px;
  height: 100%;
  width: 100%;
  opacity: 0.9;
  background-color: #000;
  border: solid 1px #eeeeee;
  color: #ffffff;
}

Теперь мы применим трансформирование, чтобы повернуть и перевести каждую сторону в 3D пространстве так, чтобы сформировать наш куб:

.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}

.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  transform: rotateX(-270deg) translateY(-100px);
  transform-origin: top center;
}

.bottom {
  transform: rotateX(270deg) translateY(100px);
  transform-origin: bottom center;
}

Используя этот же метод, мы можем создать другие простые или более сложные 3D фигуры, такие как пирамиды, прямоугольники, параллелепипеды и т. д.

Добавление 3D эффекта вращения

Для того, чтобы куб вращался, определим вращение для осей X и Y куба на 360 °, и сделаем что бы вращение было бесконечно:

@keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.cube {
  animation: rotate 20s infinite linear;
}

 

Давайте взорвём это!

Чтобы наш куб развалился при наведении мышью, мы применим “translation” ко всем сторонам куба, каждая сторона сдвинется на 100px от изначального положения:

.wrap:hover .front {
  transform: translateZ(200px);
}
.wrap:hover .back {
  transform: translateZ(-200px) rotateY(180deg);
}
.wrap:hover .right {
  transform: rotateY(-270deg) translateZ(100px) translateX(100px);
}
.wrap:hover .left {
  transform: rotateY(270deg) translateZ(100px) translateX(-100px);
}
.wrap:hover .top {
  transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
}
.wrap:hover .bottom {
  transform: rotateX(270deg) translateZ(100px) translateY(100px);
}

Теперь, чтобы получить вышеуказанную анимацию, применим “transition” ко всем сторонам куба:

 

.cube > div {
  transition: transform 0.2s ease-in;
}

Оригинал / Перевод