Вращающийся 3D-куб
В этой демонстрации разберём, как создать вращающийся 3D-куб с помощью CSS. Для этого нам понадобится HTML-разметка и CSS-стили.
Для начала создадим HTML-разметку куба. Первым элементом будет сам куб.
Добавим стенки куба. Всего их шесть: передняя, задняя, правая, левая, верхняя и нижняя.
Разметка завершена. У нас есть шесть элементов-стенок внутри блока-обёртки .cube. Приступим к стилизации куба. Зададим ширину .cube.
Перейдём к стенкам. Сделаем их квадратами с размером стороны 200px. Зальём фон полупрозрачным градиентом и добавим рамки. Квадраты пока что идут друг за другом сверху вниз.
Выровняем по центру текст внутри стенок с помощью флексов. Добавим небольшую текстовую тень.
Чтобы построить 3D-куб, будем использовать абсолютное позиционирование. Оно поможет расположить стенки в пространстве. Стенки будем позиционировать относительно .cube, поэтому зададим кубу position: relative, а стенкам position: absolute.
0-------0
/| /|
0-------0 |
| | | |
| 0-----|-0
|/ |/
0-------0
Для создания объёма расположим переднюю стенку ближе к нам с помощью свойства transform со значением translateZ(100px). Это значение смещения элемента вдоль оси Z на 100 пикселей.
Для наглядности временно спрячем часть стенок.
Мы переместили переднюю стенку ближе к нам, но внешне ничего не изменилось. Это происходит из-за того, что работа происходит в 2D-пространстве. Чтобы увидеть изменение, нужно переключить отображение куба в 3D.
Смещение стенки в 3D-пространстве станет заметно после того, как мы повернём сам куб.
После поворота куба стало видно, что передняя стенка смещена относительно других.
Теперь нужно установить остальные стенки на их места. Следующей будет задняя стенка. Для начала развернем её на 180 градусов вокруг оси Y, чтобы при вращении куба надпись оставалась читабельной.
С помощью второй трансформации сместим заднюю стенку по оси Z.
Значение translateZ(100px) такое же, как и у передней стенки, но задняя стенка сместилась от нас, а не к нам. Это произошло из-за того, что она повёрнута по оси Y, а трансформации применяются последовательно.
Выведем правую стенку.
Правую стенку сначала необходимо повернуть по оси Y на 90 градусов, а не на 180, как в случае с задней стенкой.
А затем сместить по оси Z.
Покажем левую стенку.
Левая стенка смещается по аналогии с правой. Только по оси Y мы поворачиваем её на -90 градусов, а не на 90.
Займёмся верхней стенкой.
Сначала повернём её на 90 градусов, но уже по оси X.
И сместим по оси Z.
Покажем нижнюю стенку и разместим её по аналогии с верхней. Отличаться будет значение поворота по оси X.
Обратите внимание на куб: он завершён, но кажется «кривым». Задняя стенка расположена дальше, чем передняя, и должна выглядеть меньше, однако они одинакового размера. Это связано с отсутствием перспективы, которую мы сейчас добавим.
Добавим перспективу с помощью свойства perspective: 1000px; у элемента body.
Теперь все дочерние элементы body, имеющие 3D-трансформации, будут отображаться с перспективой, словно точка обзора находится на удалении 1000 пикселей от элемента.
Чтобы создать 3D-эффект вращения, добавим анимацию поворота куба вокруг оси Y. Для этого создадим @keyframes rotate с двумя состояниями:
- В начальном состоянии элемент повёрнут на
0 градусов по оси Y и наклонён на 20 градусов по оси X. - В конечном состоянии элемент повёрнут на
360 градусов по оси Y, наклон по оси X не меняется.
Применим анимацию к кубу, заставим его вращаться бесконечно в течение 5 секунд с линейной скоростью.
Кстати, на примере 3D-куба отлично видно, как работает свойство backface-visibility со значением hidden.
Снова удалим backface-visibility. Вращающийся 3D-куб готов. Туториал завершён.
