Как создать куб на CSS3

Оцените материал
(0 голосов)

 

Здравствуйте! В этом рецепте хочу рассказать о том как сделать куб на CSS. Я хотел разобраться как создавать трехмерные фигуры на  Css на примере  вращающегося трехмерного  куба.  В основу создания куба положены трансформации и анимации CSS.   В принципк ничего сложного тут нет надо только немного трансформировать грани в пространстве по осям и добавить перспективу для родительского элемента. Ну и конечно добавить анимацию, чтобы куб двигался и было все красиво.

 

как создать куб на css3

 

 

 

Вот что в итоге получилось

 HTML:

<div class="wrap">
<div class="storona nazad"></div>
<div class="storona levo"></div>
<div class="storona pravo"></div>
<div class="storona verh"></div>
<div class="storona niz"></div>
<div class="storona pered"></div>
</div>

 CSS:

BODY {
-webkit-perspective: 500px;
perspective: 500px;
-webkit-perspective-origin: center center;
perspective-origin: center center;
}

.wrap {
width: 10em;
height: 10em;
border: 2px dotted white;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: rotate 10s infinite linear;
animation: rotate 10s infinite linear;
}

.wrap:before,
.wrap:after {
content: "";
display: block;
position: absolute;
width: 10em;
height: 10em;
border: 2px dotted white;
}

.wrap:before {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}

.wrap:after {
-webkit-transform: rotatey(90deg);
transform: rotatey(90deg);
}

.storona {
position: absolute;
width: 10em;
height: 10em;
border: 1px solid white;
opacity: .7;
}

.nazad {
-webkit-transform: translateZ(-5em);
transform: translateZ(-5em);
background: orange;
}

.pered {
-webkit-transform: translateZ(5em);
transform: translateZ(5em);
background: gold;
}

.verh {
-webkit-transform: translateY(-5em) rotateX(90deg);
transform: translateY(-5em) rotateX(90deg);
background: skyblue;
}

.niz {
-webkit-transform: translateY(5em) rotateX(90deg);
transform: translateY(5em) rotateX(90deg);
background: steelblue;
}

.levo {
-webkit-transform: translateX(-5em) rotateY(90deg);
transform: translateX(-5em) rotateY(90deg);
background: lightgreen;
}

.pravo {
-webkit-transform: translateX(5em) rotateY(90deg);
transform: translateX(5em) rotateY(90deg);
background: yellowgreen;
}

@-webkit-keyframes povorot {
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}

@keyframes povorot {
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
HTML, BODY {
height: 100%;
}

 

BODY {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

Просмотреть  пример

  А теперь давайте разберем все по шагам:

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

<div class="wrap">
    <div class="nazad storona"></div>
    <div class="levo storona"></div>
    <div class="pravo storona"></div>
    <div class="verh storona"></div>
    <div class="niz storona"></div>
    <div class="pered storona"></div>
</div>

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

2. Для того чтобы видеть что где зададим размеры рамки:

CSS:

.storona,
.wrap {
width: 10em;
height: 10em;
} .wrap {
border: 2px dotted silver;
} .storona {
position: absolute;
width: 10em;
height: 10em;
border: 1px solid orange;
opacity: .7;
} HTML, BODY {
height: 100%;
} BODY {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

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

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

При этом ничего ведь мы не задали перспективу (о перспективе CSS я писал ранее). Добавляем:

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

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

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

transform-style: preserve-3d;

Перспектива задается для родительских элементов, чтобы мы видели как относительно ее двигаются дочерние объекты.

Я добавил граням свойство прозрачности  opacity: .7;, это сделает кубик полупрозрачным.

Просмотреть  пример

4. Настал черед боковых стенок. Ну и конечно добавим анимацию, чтобы увидеть все в объеме:

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

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

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

transform: translateX(-5em);

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

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

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

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

transform: translateY(-5em);

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

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

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

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

 Просмотреть  пример

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

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

Для того чтобы подчеркнуть грани, добавим рамки.

Ну и конечны результат.

Просмотреть  пример

В заключении посмотрите видео как сделать трехмерный куб на CSS

 

Прочитано 393 раз Последнее изменение Четверг, 24 августа 2017 16:13
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+