Я создал этот трехмерный дизайн, используя чистый HTML, CSS и несколько строк JavaScript. Вы можете найти его в прямом эфире на моем сайте здесь. Код доступен на моем GitHub здесь.

Это пошаговое руководство по созданию этого дизайна. Чтобы это объяснение было кратким, я остановлюсь только на основных этапах.

Требования

  • Хорошее понимание HTML и CSS.
  • Частичное понимание JavaScript

Как создать этот дизайн

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

Шаг 1: создайте файлы index.html и styles.css. Свяжите таблицу стилей с файлом HTML.

Шаг 2. Сделайте элемент <body> гибким блоком, который центрирует его содержимое по горизонтали и вертикали.

html,body {
 height: 100%;
 margin: 0;
 padding: 0;
}
body {
 flex-direction: column;
 background-color: rgba(0,0,0, 0.88);
 display: flex;
 align-items: center;
 justify-content: center;
}

Шаг 3. Создайте контейнер (<div id="container">) внутри <body>, который будет служить контейнером для всех маленьких зеленых квадратов, которые с этого момента мы будем называть minis.

Шаг 4. Задайте для контейнера div некоторую статическую ширину и высоту и большое значение свойства перспективы (например, 40 бэр для каждого). Мы даем ему opacity: 0, потому что он будет постепенно увеличиваться, как только мы динамически добавим в него все квадраты.

#container {
 width: 40em;
 height: 40em;
 perspective: 40em;
 opacity: 0;
 transition: opacity 0.5s ease-in-out;
}

Шаг 5. Создайте свой mini квадратный класс.

.mini {
  width: 10%;
  height: 10%;
  float: left;
  background: green; /* or whatever color you want! */
  transform: rotateY(100deg) rotateX(50deg);
}

Свойство float: left заставит мини-буквы заполнять строку за строкой, как при написании предложений в английском эссе, а не столбец за столбцом. Свойство transform будет наклонять мини в одном направлении.

Шаг 6. Используя Javascript, динамически создайте и добавьте 100 миниатюр в свой контейнер после загрузки страницы.

window.onload = function() {
  var container = document.getElementById("container");
  for(var i = 1; i < 101; i++)
  {
    var mini = document.createElement("div");
    mini.classList.add("mini");
    mini.style.opacity = (i%11)/11;
    container.appendChild(mini);
  }
  container.style.opacity = 1;
}

Часть непрозрачности может показаться запутанной. Во-первых, поймите, что каждый i, который делится на 11, будет иметь непрозрачность 0, потому что i % 11 будет равно 0. Затем помните, что в строке 10 квадратов. Это означает, что для каждой строки квадрат с opacity: 0 будет на один квадрат справа от строки над ним. Вот как мы получаем диагональную линию без квадратов. Та же самая логика применима к каждой диагонали. Все квадраты на каждой диагонали имеют одинаковую прозрачность.

Спасибо за внимание!
Если у вас есть какие-либо вопросы, оставляйте комментарии ниже или пишите мне по адресу:
[email protected]