Frontend Art 02 — 3D Squares

2 min readMar 31, 2020

I created this three-dimensional design using pure HTML, CSS, and a few lines of JavaScript. You can find it live on my website here. The code is available on my GitHub here.

This is a walkthrough of how I went about creating this design. To keep this explanation concise, I will only cover the significant milestones.

Requirements

Solid understanding of HTML and CSS
Partial understanding of JavaScript

How to Create This Design

Note: If you get stuck at any point in this, feel free to Inspect Element on my website or take a look at my codebase. The links can be found above.

Step 1: Create index.html and styles.css files. Link the stylesheet to the HTML file.

Step 2: Make your <body> element a flexbox that centers its content horizontally and vertically.

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;
}

Step 3: Create a container (<div id="container">) inside the <body> that will serve as the container for all the little green squares, which we will call minis from now on.

Step 4: Give your container div some static width and height and a large perspective property value (e.g. 40rem each). We give it opacity: 0 because we will fade it in once we dynamically add all the squares into it.

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

Step 5: Create your mini square class.

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

The float: left property will cause the minis to fill in row by row, like writing sentences in an English essay, rather than column by column. The transform property will angle the minis all in the same direction.

Step 6: Using Javascript, dynamically create and add 100 minis to your container once the page loads.

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;
}

The opacity part may seem confusing. First, understand that every i that is divisible by 11 will have an opacity of 0 because i % 11 will equal 0. Then, remember that there are 10 squares per row. This means that, for each row, the square with opacity: 0 will be one square to the right of the row above it. This is how we get that diagonal line of no squares. This same logic applies to each diagonal. All squares in each diagonal have the same opacity.

Thank you for reading!
If you have any questions, please feel free to comment below or reach out to me at:
ymoondhra@gmail.com

Frontend Art 02 — 3D Squares

How to Create This Design

Written by Yash Moondhra