Lets create a 3D cube with CSS

Basic idea

Although I’m not sure how useful 3D transformations are in modern web design and how extensively you should use them, there is no doubt that they are just cool. Therefore I want to show you how to create a simple 3D cube using some simple HTML divs and CSS3 3D transforms.

The basic idea is to create all the sides of our cube in the well known 2D space using divs (each having a different color) and then transform each side of the cube into the 3D space. Meaning changing the position and rotating the div so that it will be in the right place for a cube. We will start off with a single div and then continue to add the other sides of the cube.

This is what we want to achieve:

First 3D tranfrom

First of all we need some place to draw our cube. Imagine this as a canvas supporting 3D content. We can use a simple div as our canvas and add it some CSS properties to achieve this. Look at the example below as our starting point.

Lets add some properties to the canvas.

.canvas {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 500px;
  perspective: 500px;
  width:250px;
  height:250px;
  background-color:black;
}

And now lets transform the blue box in the 3D space by rotating it along the x-axis.

.side {
  background-color:blue;
  width:150px;
  height:150px;
  -webkit-transform: rotateX(45deg);
  transform: rotateX(45deg);
}

Here is the example:

You can easily enhance the example by adding some image to the background of the rotated plane and experiment with different degrees.

3d-kirk

So what did we just do?

-webkit-perspective: 500px;
perspective: 500px;

The perspective property kind of activates our 3D space. The value defines the distance from the viewer. In our case 500px is a pretty good value. If the value is low, the 3D effect looks weird, if the value is much higher the 3D effect is not notable anymore. Here are some examples to get a feeling about the perspective:

perspective
Click on the image to see more details
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;

The transform style property can take either flat or preserve-3d. preserve-3d allows the child elements to be in the 3D space. I found this example to be  helpful.

  -webkit-transform: rotateX(45deg);
  transform: rotateX(45deg);

The transform property does the actual transformation of the div. In the example it is rotated by 45 degrees along the x-axis.

The 3D coordinate system

We need some basic understanding about the 3D coordinate system to be able to position and transform each side of the cube. See  below examples of some basic tranforms.

rotateX

rotateY

rotateZ

translateZ

Back to the cube

If we combine the rotate and translate transforms, we can easily build up a cube. Let’s start with the 6 faces of the cube. Our goal ist to create a cube with a dimension 100px*100px*100px.

Now we just need to rotate and translate the different faces and we have a 3D cube. At first, all our faces are in the center of the cube. From the center:

  • The back side needs to be rotated by 180° around the X axis and then moved by 50px
  • The front side doesn’t need any rotation but needs to be moved by 50px
  • The top side needs to be rotated by 90° around the X axis and moved by 50px
  • The bottom side needs to be rotated by -90° around the X axis and moved by 50px
  • The left side needs to be rotated by -90° around the Y axis and moved by 50px
  • The right side needs to be rotated by 90° around the Y axis and moved by 50px

Note: to stack all sides of the cube I needed to add position:absolute. Without that we would also transform our sides, but not from the same center. You can try to remove position:absolute to see what happens.

Add some animation

Now lets add some keyframe animation to rotate the cube along its Y axis.  For this first we need to add another div between the canvas and the 6 sides of the cube. Lets call this div cube. Having this element, we can rotate the whole cube at once.

Equal height divs made simple

I can’t remember how often I had to create a column based layout using HTML and always struggled when it came down to placing two divs next to each other having the same size. Usually the problems pops up when the columns have a different background or some kind of other visual attribute such as a border. Because when everything has the same color who can tell you if the elements have the same size? 😉

columns-2
This is what usually happens when you try to place a div next to another

There are different approaches to solve this issue and none of them I really liked until I learned about display:table-row and display-table-cell. Both display values are fully supported by all modern browsers (starting from IE9).

columns-1
The result using the CSS display property. Its easy to understand and no hack anymore.

With those display values you can arrange your divs like a table without having to use the old school <table> for laying out your page.

The usage of this CSS properties is pretty simple and straight forward. Imagine we want to create a row with two columns. Back in the old days one would have coded something like:

<table>
  <tr>
    <td>column1</td>
    <td>column2</td>
  </tr>
</table>

The CSS property display allows you to style a visual element to behave like table elements. Instead of using <table>, <tr> and <td> elements we just use simple divs. See the example in the jsFiddle below:

Wie ich zum Programmieren gekommen bin

Schon als Kind habe ich mich für Computer sehr begeistern können. Als dann mein damals bester Freund Omar seinen alten Commodore 128 für ein paar Franken verkaufen wollte, habe ich sofort zugeschlagen. Ich wusste damals nicht wirklich, was ein C128 ist und war reichlich enttäuscht, als ich diesen gestartet habe und keine Spiele starten konnte. Man muss dazu wissen, dass ich lediglich das Grundgerät, einen Monitor und ein Handbuch dazu erhalten habe. Dass so ein Teil gar keine Festplatte hat und somit gar keine Spiele darauf installiert sein konnten, wusste ich nicht.

c128
Dies ist mein C128. Diesen werde ich wohl niemals weggeben.

Einige Zeit später hat es mich wieder zu meinem C128 gezogen. Irgendetwas musste man doch damit anstellen können! Das war das erste Mal, dass ich das Handbuch studiert habe und die Befehle einfach einmal eingetippt habe und irgendwie hat es auf einmal Klick gemacht und ich habe begriffen, dass man mit dem Teil eigene Programme schreiben kann: man kann dem Computer befehle eingeben und er führt diese aus!

Leider habe ich das erwähnte Handbuch nicht mehr gefunden, dafür dieses hier
Leider habe ich das erwähnte Handbuch nicht mehr gefunden, dafür dieses Handbuch über den CP/M-Modus

Seither habe ich den C128 lieben gelernt und habe mir im Brockenhaus (ja, damals gab es noch kein eBay) diverse Hardware organisiert. Am Ende hatte ich eine Maus, ein Laufwerk, ein Drucker und ein Kassettenlaufwerk. Und natürlich viele Disketten und einige Markt & Technik Bücher.

Meine wichtigste Lektion habe ich gelernt, als ich versucht habe, meine Mathe-Hausaufgaben mit dem C128 zu lösen. Da habe ich gemerkt, wie nützlich so eine Maschine doch ist und das Tüfteln hat viel mehr Spas gemacht, als die Mathe-Aufgaben einfach so zu lösen. 🙂