Blog

Cuboids on a Div: Proving The Concept

| Published by Callan Milne on October 14, 2020 3:59 pm

Making a browser-based city simulator game with HTML, CSS, and plain old JavaScript.

This is part two in a series about computer game development. For part one, see Cuboids on a Div.

After drawing up the initial idea on some paper. The next step was to prove the concept. This meant actually writing some HTML, and CSS, and taking a look in a browser to see if I could actually get some cuboids on a div.

Research

The first place I started was the MDN Web Docs. I’ve worked with 3d transitions and transforms in CSS3 previously, and I remembered this to be a good source of information.

My first search was for information about the CSS3 function translate3d, which is used to reposition an element in a 3D space.

To save some time, I decided to make my start based on the example in the documentation.

The Code

The next step was writing the code to prove the concept.

The HTML

To start I created a div element to contain our block of land, which I gave the ID container. I then added a div for the block of land it’s self, and I gave it the class land.

I’ve then created a new div element which will be the cuboid it’s self. I’ve given it the class cube, in line with the example in the MDN docs.

The cuboid has six faces: front, back, top, bottom, left, and right. So I’ve created a div element for each of these inside the cube class element, and given them corresponding classes.

<div id="container">
  <div class="land">
    <div class="cube">
      <div class="face front">1</div>
      <div class="face back">2</div>
      <div class="face right">3</div>
      <div class="face left">4</div>
      <div class="face top">5</div>
      <div class="face bottom">6</div>
    </div>
  </div>
</div>

The CSS

The CSS for the proof of concept is fairly simple. We can construct the cuboid by positioning it’s faces using the functions rotateX, rotateY, and translateZ.

With rotateX, and rotateY, the faces can be rotated, and once rotated, they can then be moved more directly in to position with translateZ.

The cuboids now need to be positioned correctly on the div. To do this, I’ve used translate3d to move it on top, and a little more inside of the div. Then I’ve used rotateX to put it the correct way up.

Finally, just to make sure it’s clear that it is actually a 3D object, in a 3D space, I’ve added an animation, whereby the land is rotated using rotate3d. For 3D animations to work as you might imagine, you’ll need to be sure to set the css transform-style to preserve-3d.

@keyframes rotateOn3d {
  from {
    transform: rotate3d(240, -24, 24, 0.2turn);
  }
  to {
    transform: rotate3d(24, 24, 240, 0.2turn);
  }
}

#container {
  margin: 200px;
  perspective: 550px;
  height: 550px;
  width: 550px;
}

div.land {
  transition: all 300ms;
  transform-style: preserve-3d;
  animation: rotateOn3d linear 5s infinite alternate;
  background-color: #eee;
  width: 400px;
  height: 400px;
}

div.cube {
  display: inline-block;
  transform-style: preserve-3d;
  width: 100px;
  height: 200px;
  transform: translate3d(20px, -30px, 100px)
    rotateX(-90deg);
}

div.cube .face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: #fff;
}

div.cube .face.front {
  background: rgba(90, 90, 90, .7);
  transform: translateZ(50px);
}

div.cube .face.back {
  background: rgba(0, 210, 0, .7);
  transform: rotateY(180deg) 
    translateZ(50px);
}

div.cube .face.right {
  background: rgba(210, 0, 0, .7);
  transform: rotateY(90deg) 
    translateZ(50px);
}

div.cube .face.left {
  background: rgba(0, 0, 210, .7);
  transform: rotateY(-90deg)
    translateZ(50px);
}

div.cube .face.top {
  height: 100px;
  background: rgba(210, 210, 0, .7);
  transform: rotateX(90deg)
    translateZ(50px);
}

div.cube .face.bottom {
  height: 100px;
  background: rgba(210, 0, 210, .7);
  transform: rotateX(-90deg)
    translateZ(150px);
}

Let’s Take a Look

Now that we’ve written the code, we can take a look in a browser. I’ve put this example up on CodePen – check out Cuboids on a Div on CodePen.

Cuboids on a Div – Proof of Concept