Создание 3D-кубика в CSS

В этой статье я наконец-то затрону тему, которую слишком долго откладывал.

3D в CSS!

Да, 3D, и что может быть лучше, чем попробовать и сделать 3D-кубик в CSS.

Результатом этой статьи будет вот такой вращающийся кубик.
(Код и демо внизу)

Настройка HTML

Давайте начнем с HTML. Нам нужен контейнер для игральной кости и шесть ее граней.

<div class="dice">
  <div class="side one"></div>
  <div class="side two"></div>
  <div class="side three"></div>
  <div class="side four"></div>
  <div class="side five"></div>
  <div class="side six"></div>
</div>
Войти в полноэкранный режим Выйти из полноэкранного режима

Это все для нашей HTML-части. Давайте быстро перейдем к самой интересной части — CSS.

Базовая стилизация

Давайте начнем с базовой стилизации.

Во-первых, я позаботился о том, чтобы элемент dice находился в центре страницы, так как с ним легче работать.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Затем я перешел к расположению кубиков в виде большой квадратной коробки.

.dice {
  position: relative;
  width: 200px;
  height: 200px;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Затем с каждой стороны — еще одна обертка, которая центрирует все свои дочерние элементы (точки).

.side {
  width: 100%;
  height: 100%;
  background: #da0060;
  border: 2px solid black;
  position: absolute;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
}
Войти в полноэкранный режим Выход из полноэкранного режима

К этому моменту вы должны увидеть что-то похожее на это:

Может показаться, что это не очень много, но поверьте мне, здесь шесть сторон!

Создание точек на кубиках в CSS

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

Я не хотел использовать много дополнительных div’ов, поэтому каждый вариант состоит только из одного псевдоселектора.

И начинается он со стороны #1.

.side {
  &:before {
    content: '';
    width: 20%;
    height: 20%;
    background: black;
    border-radius: 50%;
  }
}
Войти в полноэкранный режим Выход из полноэкранного режима

Я слышу, что вы думаете, но как насчет остальных?

И для этого есть очень крутой трюк! Для этого мы можем использовать правило box-shadow.

Если подумать, то у точки может быть только семь позиций.
Одна у нас уже есть, так что давайте рассмотрим остальные шесть.

&:before {
  content: '';
  width: 20%;
  height: 20%;
  background: black;
  border-radius: 50%;
  box-shadow: red -50px -50px 0px 0px, blue -50px 0px 0px 0px,
    yellow -50px 50px 0px 0px, green 50px -50px 0px 0px, orange 50px 0px 0px 0px,
    white 50px 50px 0px 0px;
}
Вход в полноэкранный режим Выход из полноэкранного режима

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

Примечание: Черная точка — это наша начальная точка.

Теперь давайте продолжим и создадим все возможные варианты точек.

Для стороны #2 нам не нужна начальная точка, чтобы мы могли отключить фон.

.two {
  &:before {
    background: transparent;
    box-shadow: #000 -50px -50px 0px 0px, #000 50px 50px 0px 0px;
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Для номера 3 мы можем использовать аналогичный подход, но не скрывать фон:

.three {
  &:before {
    box-shadow: #000 -50px 50px 0px 0px, #000 50px -50px 0px 0px;
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Затем для четвертого:

.four {
  &:before {
    background: transparent;
    box-shadow: #000 -50px 50px 0px 0px, #000 -50px -50px 0px 0px,
      #000 50px 50px 0px 0px, #000 50px -50px 0px 0px;
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

И переходим к пятому:

.five {
  &:before {
    box-shadow: #000 -50px -50px 0px 0px, #000 -50px 50px 0px 0px,
      #000 50px -50px 0px 0px, #000 50px 50px 0px 0px;
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

И, наконец, номер шесть, который мы использовали в качестве шаблона.

.six {
  &:before {
    background: transparent;
    box-shadow: #000 -50px -50px 0px 0px, #000 -50px 0px 0px 0px,
      #000 -50px 50px 0px 0px, #000 50px -50px 0px 0px, #000 50px 0px 0px 0px, #000
        50px 50px 0px 0px;
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Наш результат будет выглядеть странно, поскольку наши прозрачные слои накладываются друг на друга.

Упорядочивание кубика в 3D CSS

Теперь, когда все наши элементы на месте, давайте начнем веселье и применим 3D-эффект!

Мы можем добиться трехмерной перспективы в CSS с помощью трансформаций. У нас есть три оси для игры: оси X, Y и Z.

Сначала давайте изобразим наш куб в перспективе.

.dice {
  transform-style: preserve-3d;
  transform: rotateY(185deg) rotateX(150deg) rotateZ(315deg);
}
Войдите в полноэкранный режим Выход из полноэкранного режима

Теперь, если мы посмотрим на то, что получилось, это может выглядеть немного странно.

Это уже 3D, но еще не похоже на куб. Нам нужно изменить каждую сторону, чтобы выполнить ее преобразование.

Давайте начнем с первой стороны.

.one {
  transform: translateZ(100px);
}
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Это поднимет сторону, так что она будет торчать вверх.

Возможно, вы уже видите, к чему это приведет.
Теперь давайте сделаем противоположную сторону, это сторона номер шесть.

Мы сместим ее на отрицательные 100px. Это означает, что расстояние между первой и шестой сторонами теперь равно 200px (размер нашего куба).

.six {
  transform: translateZ(-100px);
}
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь займемся стороной номер два. Ее нужно соединить, преобразовав другую ось.

.two {
  transform: translateX(-100px) rotateY(-90deg);
}
Войдите в полноэкранный режим Выйти из полноэкранного режима

Теперь проще всего соединить противоположную сторону, сторону номер пять.

.five {
  transform: translateX(100px) rotateY(90deg);
}
Войти в полноэкранный режим Выход из полноэкранного режима

Как видите, это та же самая трансформация, но мы сместили ее на 200 пикселей.

Осталось еще две стороны. Давайте сделаем сторону номер три.

.three {
  transform: translateY(100px) rotateX(90deg);
}
Войти в полноэкранный режим Выход из полноэкранного режима

Как видите, это обратная трансформация от 2 к 5.

Остался последний — номер четыре, который будет противоположен номеру три.

.four {
  transform: translateY(-100px) rotateX(90deg);
}
Вход в полноэкранный режим Выход из полноэкранного режима

Вот и все, наши кубики готовы!

Анимация игральных костей

Теперь, когда у нас есть наша игральная кость, давайте сделаем ее более интерактивной, анимировав ее!

Каждая из сторон, которые мы описали, также может быть анимирована. Я буду поворачивать кубик только одной стороной, но вы можете поиграть с любой из них, чтобы добиться другой анимации.

@keyframes rotate {
  from {
    transform: rotateY(0) rotateX(45deg) rotateZ(45deg);
  }
  to {
    transform: rotateY(360deg) rotateX(45deg) rotateZ(45deg);
  }
}

.dice {
  animation: rotate 5s linear infinite;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Законченный пример вы можете найти в этом CodePen.

Спасибо, что прочитали, и давайте общаться!

Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.

Оцените статью
devanswers.ru
Добавить комментарий