3D-куб

Мне давно хотелось разобраться с 3D фигурами в Css и сделать вращающийся куб. Спеки прочитаны, можно приступать (почитать про трансформы и про анимации).

Вот что у меня получилось:

See the Pen 3D Cube Tutorial, fig. 1 by yoksel (@yoksel) on CodePen.

А теперь шаги:

1. Создаем основу будущего куба:

<div class="container">
  <div class="back side"></div>
  <div class="left side"></div>
  <div class="right side"></div>
  <div class="top side"></div>
  <div class="bottom side"></div>
  <div class="front side"></div>
</div>

Один родительский контейнер и 6 граней. Последовательность определяется близостью стенки к зрителю: задняя стенка позади всех остальных, передняя — перед всеми.

2. Задаем размеры и рамки, чтобы видеть что где:

See the Pen 3D Cube Tutorial, fig. 2 by yoksel (@yoksel) on CodePen.

3. Начинаем двигать стены. Все грани надо отодвинуть от центра на половину длины грани и повернуть на угол, соответствующий положению грани в пространстве. Начнем с задней стенки:

transform: translateZ(-5em); — сдвигаем стенку в глубину.

See the Pen 3D Cube Tutorial, fig. 3 by yoksel (@yoksel) on CodePen.

И ничего не происходит, потому что у сцены не задана перспектива. Добавляем:

BODY {
  perspective: 1000px;
  perspective-origin: center -5em;
}

Первая строчка — глубина перспективы. Второе свойство определяет с какой точки мы смотрим на объект. Я задала вид на объект немного сверху (-5em).

Чтобы контейнер не слипался, нужно добавить ему поддержку 3D:

transform-style: preserve-3d;

See the Pen 3D Cube Tutorial, fig. 4 by yoksel (@yoksel) on CodePen.

Перспектива задается для внешних объектов (для всей сцены), а не для контейнера с трансформациями, потому что она не должна зависеть от перемещений трансформируемого элемента в пространстве. Если задать её для контейнера, она зафиксируется и будет двигаться вместе со всем объектом (пример справа).

See the Pen 3D Cube Tutorial, fig. 5 by yoksel (@yoksel) on CodePen.

Чтобы видеть как двигаются стенки, удобно каждой из них задать свой фон. Ещё я добавила стенкам opacity: .7;, чтобы сделать кубик полупрозрачным.

4. Теперь установим боковые стенки. Чтобы видеть получающуюся фигуру в объеме, добавим ей анимацию:

@keyframes rotate {
  100% {
    transform: rotateY(360deg);
  }
}

.container {
  ...
  animation: rotate 10s infinite linear;
}

Чтобы поставить стенки на место, сначала подвинем их на половину ширины куба по оси X:

transform: translateX(-5em);

А затем повернём на 90 градусов вокруг вертикальной оси. Вот весь код для левой стенки:

.left {
  transform: translateX(-5em) rotateY(90deg);
}

Правая двигается аналогично, но в противоположную сторону по оси X.

Что получилось:

See the Pen 3D Cube Tutorial, fig. 6 by yoksel (@yoksel) on CodePen.

5. Позиционируем верх и низ. Для этого их нужно подвинуть по вертикальной оси на половину ширины куба:

transform: translateY(-5em);

И повернуть на 90 градусов вокруг горизонтальной.

Код для верхней грани:

.top {
  transform: translateY(-5em) rotateX(90deg);
}

Нижняя делается так же, но сдвигается в другую сторону по оси Y.

Что получилось:

See the Pen 3D Cube Tutorial, fig. 7 by yoksel (@yoksel) on CodePen.

6. Последним шагом ставим на место переднюю стенку. Её достаточно просто сдвинуть вперед:

.front {
  transform: translateZ(5em);
}

Также чтобы подчеркнуть грани добавила белые рамки. Вот что получилось в итоге:

See the Pen 3D Cube Tutorial, fig. 8 by yoksel (@yoksel) on CodePen.

На гранях может быть что угодно, например, картинки и декоративные элементы:

See the Pen 3D Cube Tutorial, fig. 9 by yoksel (@yoksel) on CodePen.