Вход
Быстрая регистрация
Если вы у нас впервые: О проекте FAQ
2

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

Skiyers [83.2K] 9 месяцев назад

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

1

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

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

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

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

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

0

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

<div class="cube">

<div class="topside">

</div>

<div class="leftside">

</div>

<div class="rightside">

</div>

</div>

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

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

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

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

Знаете ответ?
Есть интересный вопрос? Задайте его нашему сообществу, у нас наверняка найдется ответ!
Делитесь опытом и знаниями, зарабатывайте награды и репутацию, заводите новых интересных друзей!
Задавайте интересные вопросы, давайте качественные ответы и зарабатывайте деньги. Подробнее..
регистрация
OpenID