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