Создайте завораживающий 3D вращающийся куб с помощью HTML и CSS

Введение

В этом лабораторном занятии мы создадим вращающийся 3D-куб с использованием HTML и CSS. Куб будет иметь шесть граней разного цвета и непрерывно вращаться в трехмерном пространстве, демонстрируя возможности 3D-трансформаций и анимаций в CSS. Этот проект является прекрасным введением в 3D-возможности CSS, позволяя вам представить, как элементы могут быть позиционированы и анимированы в трехмерном пространстве без использования JavaScript.

Создать HTML-структуру

3D-куб состоит из шести граней: передней, задней, левой, правой, верхней и нижней. Мы должны создать HTML-структуру, которая позволит нам позиционировать эти грани в трехмерном пространстве.

Откройте файл index.html в директории проекта и добавьте необходимый HTML-код для создания структуры куба.

Откройте WebIDE, перейдя в панель проводника файлов слева.
Щелкните по файлу index.html, чтобы открыть его в редакторе.
Скопируйте и вставьте следующий HTML-код в файл:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Rotating Cube</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="cube">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
        <div class="face right">Right</div>
        <div class="face left">Left</div>
        <div class="face top">Top</div>
        <div class="face bottom">Bottom</div>
      </div>
    </div>
  </body>
</html>

Понять эту HTML-структуру можно следующим образом:

Мы начинаем со стандартной структуры документа HTML5, включая метаданные и заголовок.
Мы подключаем наш CSS-файл (style.css), который мы создадим на следующем шаге.
В теле документа мы создаем контейнер div, который центрирует наш куб на странице.
Внутри контейнера есть div с классом cube, который станет нашим 3D-объектом.
Внутри куба мы определяем шесть div, каждый с классом face и дополнительным классом, идентифицирующим его позицию (передняя, задняя и т.д.).
Каждая грань содержит текст, указывающий на ее позицию, чтобы помочь нам идентифицировать их.

Кнопка "Go Live"

Чтобы увидеть текущий прогресс, найдите кнопку "Go Live" внизу WebIDE и нажмите на нее. Это запустит локальный веб-сервер и откроет вкладку браузера с отображением вашей страницы. В настоящее время вы увидите только текст для каждой грани, наложенный друг на друга, так как мы еще не применили никаких стилей.

Cube faces preview after HTML structure

На следующем шаге мы используем CSS, чтобы преобразовать эти div в грани 3D-куба.

Создать базовые стили CSS

Теперь, когда у нас есть HTML-структура, нам нужно применить к ней стили, чтобы создать основу для нашего 3D-куба. На этом шаге мы добавим необходимый CSS для создания контейнера для куба и стилизации граней куба.

В WebIDE щелкните по файлу style.css в панели проводника файлов, чтобы открыть его.
Скопируйте и вставьте следующий CSS-код в файл:

/* Базовый сброс и стилизация страницы */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Стилизация контейнера с перспективой */
.container {
  perspective: 1000px;
  /* Свойство perspective определяет, насколько далеко объект находится от зрителя */
  /* Меньшее значение создает более интенсивный 3D-эффект */
}

/* Стили контейнера куба */
.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  /* Это сообщает браузеру, что дочерние элементы должны быть позиционированы в трехмерном пространстве */
}

/* Общие стили для всех граней */
.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  opacity: 0.9;
}

Понять добавленный нами CSS можно следующим образом:

Сначала мы применяем базовый сброс CSS, чтобы обеспечить единообразную стилизацию на разных браузерах, установив отступы и поля равными нулю.
Мы стилизуем элемент body, чтобы центрировать наш куб вертикально и горизонтально на странице с использованием flexbox.
Класс .container включает свойство perspective, которое является важным для 3D-эффектов. Представьте, что это определяет, насколько далеко вы стоите от куба. Значение 1000px обеспечивает умеренный 3D-эффект.
Класс .cube определяет размеры нашего куба (200px × 200px) и использует transform-style: preserve-3d. Это свойство является важным, так как оно сообщает браузеру, что дочерние элементы должны быть позиционированы в трехмерном пространстве, а не сжаты в плоскость.
Класс .face содержит стили, общие для всех шести граней:
- position: absolute позволяет граням быть позиционированы в одном и том же пространстве
- Каждая грань имеет те же размеры, что и куб (200px × 200px)
- Мы используем flexbox, чтобы центрировать текст на каждой грани
- Мы добавляем белые границы и текст с тенью для лучшей видимости

Теперь, если вы обновите вкладку браузера с "Go Live", вы должны увидеть некоторые изменения, но грани все еще наложены друг на друга. Это потому, что мы еще не позиционировали их в трехмерном пространстве. Мы сделаем это на следующем шаге.

CSS styles applied to a 3D cube

Разместить грани куба в 3D-пространстве

Теперь нам нужно позиционировать каждую грань куба в трехмерном пространстве. Чтобы создать куб, нам нужно разместить каждую грань на расстоянии, равном половине ширины куба (100px), от центра в шести разных направлениях.

Для этого мы будем использовать 3D-трансформации CSS:

translateZ() перемещает элемент вперед или назад по оси Z
rotateX() вращает элемент вокруг горизонтальной оси X
rotateY() вращает элемент вокруг вертикальной оси Y

Добавим CSS для позиционирования каждой грани:

В WebIDE, оставив файл style.css открытым, добавьте следующий CSS-код в конец файла:

/* Позиционирование каждой грани куба */
.front {
  background-color: #ff8a65; /* Coral */
  transform: translateZ(100px);
  /* Перемещает переднюю грань на 100px к зрителю */
}

.back {
  background-color: #4fc3f7; /* Light Blue */
  transform: rotateY(180deg) translateZ(100px);
  /* Поворачивает на 180° вокруг оси Y и перемещает на 100px вперед */
}

.right {
  background-color: #81c784; /* Light Green */
  transform: rotateY(90deg) translateZ(100px);
  /* Поворачивает на 90° вправо вокруг оси Y и перемещает на 100px вперед */
}

.left {
  background-color: #9575cd; /* Purple */
  transform: rotateY(-90deg) translateZ(100px);
  /* Поворачивает на 90° влево вокруг оси Y и перемещает на 100px вперед */
}

.top {
  background-color: #ffb74d; /* Orange */
  transform: rotateX(90deg) translateZ(100px);
  /* Поворачивает на 90° вверх вокруг оси X и перемещает на 100px вперед */
}

.bottom {
  background-color: #f06292; /* Pink */
  transform: rotateX(-90deg) translateZ(100px);
  /* Поворачивает на 90° вниз вокруг оси X и перемещает на 100px вперед */
}

Понять, что делает этот CSS, можно следующим образом:

Мы задаем каждой грани разный цвет фона, чтобы их можно было различить визуально.
Для каждой грани мы применяем определенную трансформацию, чтобы правильно ее позиционировать:
- Передняя грань просто перемещается на 100px к зрителю по оси Z.
- Задняя грань поворачивается на 180° вокруг оси Y и перемещается на 100px вперед.
- Правая грань поворачивается на 90° по часовой стрелке вокруг оси Y и перемещается на 100px вперед.
- Левая грань поворачивается на 90° против часовой стрелки вокруг оси Y и перемещается на 100px вперед.
- Верхняя грань поворачивается на 90° вверх вокруг оси X и перемещается на 100px вперед.
- Нижняя грань поворачивается на 90° вниз вокруг оси X и перемещается на 100px вперед.

Теперь обновите вкладку браузера, чтобы увидеть изменения. Вы должны увидеть переднюю грань куба. Однако куб еще не вращается, поэтому вы не можете увидеть другие грани. Мы добавим анимацию вращения на следующем шаге.

Как работают 3D-трансформации:

Когда мы применяем трансформацию rotateY(90deg), мы фактически поворачиваем элемент на 90 градусов вокруг оси Y (вертикальной оси), заставляя его смотреть вправо.
После вращения, когда мы применяем translateZ(100px), мы перемещаем элемент на 100px вперед в направлении, в котором он сейчас смотрит (которое может быть любым, в зависимости от предыдущих вращений).
Совмещая эти трансформации, мы можем разместить каждую грань в правильном положении и ориентации, чтобы образовать куб.

CSS code for positioning cube faces

Добавить анимацию для вращения куба

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

CSS-анимации позволяют нам создавать движение на веб - страницах без использования JavaScript. Мы определим анимацию с помощью ключевых кадров и применим ее к нашему кубу.

В WebIDE добавьте следующий CSS - код в конец файла style.css:

/* Определение анимации вращения */
@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(90deg) rotateY(90deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(270deg) rotateY(270deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

/* Применение анимации к кубу */
.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear;
  /* 20s определяет продолжительность одного полного вращения */
  /* infinite означает, что анимация будет повторяться бесконечно */
  /* linear означает, что скорость анимации постоянна */
}

Понять этот CSS можно следующим образом:

Правило @keyframes определяет анимацию с именем rotate.
- Оно указывает, как элемент должен выглядеть на различных этапах анимации.
- На 0% куб не вращается.
- На 25% куб повернулся на 90 градусов как по оси X, так и по оси Y.
- На 50% куб повернулся на 180 градусов по обеим осям.
- На 75% куб повернулся на 270 градусов по обеим осям.
- На 100% куб выполнил полный 360 - градусный поворот по обеим осям.
Мы обновляем селектор .cube, чтобы применить эту анимацию:
- animation: rotate 20s infinite linear применяет анимацию rotate.
- Продолжительность анимации составляет 20 секунд на одно полное вращение.
- Она повторяется бесконечно.
- Функция линейного времени (linear timing function) обеспечивает постоянную скорость вращения.

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

Понимание CSS - анимаций:

CSS - анимации состоят из двух компонентов: стиля, описывающего анимацию, и набора ключевых кадров, определяющих состояния анимации в различных временных точках.
Свойство animation является сокращенной формой для нескольких свойств анимации:
- animation - name: Указывает имя правила @keyframes
- animation - duration: Указывает, сколько времени должно занять анимации для завершения одного цикла
- animation - timing - function: Определяет, как анимация развивается в течение одного цикла
- animation - iteration - count: Указывает, сколько раз анимация должна повторяться

Теперь вы успешно создали вращающийся 3D - куб, используя только HTML и CSS. Этот пример демонстрирует мощь 3D - трансформаций и анимаций CSS для создания визуально привлекательных веб - элементов без необходимости использования JavaScript.

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

Rotating 3D cube animated with CSS

Резюме

Поздравляем вас с успешным завершением лабораторной работы по созданию вращающегося 3D - куба. В рамках этой лабораторной работы вы:

Создали HTML - структуру с шестью гранями для 3D - куба
Применили стили CSS для позиционирования элементов в трехмерном пространстве
Использовали 3D - трансформации CSS для правильного размещения каждой грани в трехмерном пространстве
Добавили CSS - анимации для создания непрерывно вращающегося куба

В этом проекте вы познакомились с несколькими важными концепциями CSS:

3D - трансформации CSS (перемещение, вращение)
Свойство perspective для создания 3D - эффектов
Свойство transform - style для сохранения трехмерного позиционирования
Ключевые кадры CSS - анимаций

Эти концепции являются мощными инструментами для создания привлекательных и интерактивных веб - интерфейсов без использования JavaScript. Вы можете применить эти техники для создания различных 3D - элементов, от простых вращающихся карт до сложных 3D - моделей.

В качестве продолжения этого проекта вы можете рассмотреть следующие идеи:

Добавление эффекта наведения, чтобы анимация останавливалась, когда пользователь наводит курсор на куб
Добавление изображений или более сложного контента на каждую грань
Создание различных путей анимации путем изменения ключевых кадров
Экспериментирование с разными размерами, цветами и скоростями вращения

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

3D Вращающийся куб