Question

Как сделать куб в HTML/CSS?

Стандартный куб и вращающийся куб?

Answer 1

Перенесла инструкцию по кубу с вращением в отдельный ответ, так как из-за большого количества символов у меня всё повисло :)

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

Поскольку есть общие стили для всех сторон, то либо выделяйте отдельный класс (в данном случае side), либо назовите контейнер, например, section вместо div. Но я предпочитаю задать два класса и не путаться.

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

Размеры заданы в em, вы можете задать любую другую единицу. Если не хотите, чтобы стенки "поехали", меняйте размеры пропорционально. Например, если вы устанавливаете размер сторон в 100 пикселей, в трансформе поменяйте значения на -50px или 50px, соответственно.

Answer 2

Обычный куб чаще всего повернут к зрителю тремя сторонами. Поэтому нужно создать три блока для его оформления.

<div class="cube">

<div class="topside">

</div>

<div class="leftside">

</div>

<div class="rightside">

</div>

</div>

Каждой из граней нужно задать свой цвет или разные оттенки одного цвета для создания эффекта обьёма. Определите, откуда будет падать свет и там задайте светлый оттенок, а на другие грани более темный. В идеале стоит использовать градиент.

Все стороны должны быть абсолютно спозиционированы в "обрамлении", чтобы они не улетали куда попало.

CSS код получится примерно таким:

В результате получается куб серого цвета с разными оттенками сторон.