Gone are the days when we had to use fancy technologies to render 3D objects to the screen. CSS3 comes with a few amazing properties to help us create 3D shapes from nothing but standard HTML Divs. The transform: skew property is the one we are interested in today particularly, and we’ll see how this comes into play when creating our 3D cube. Let’s jump right in.

STEP ONE:

The HTML

We’ve created a very simple HTML page with 3 Divs, each with their own unique ID. There’s nothing special about the HTML page at all in fact. Here, have a look for yourself:

STEP TWO:

The CSS

Our CSS is a bit more complicated than our HTML; however, is still fairly easy to understand. Again, we’re making extensive use of the transform: skew property, as that is going to give us the illusion of a 3D object. Before I explain exactly what the transform: skew property does, have a look at the CSS:

The transform: skew property essentially changes the perspective of an element on the page. In our CSS, we’ve skewed each of our faces so that they take the proper perspective for a cube, and rotated them to fit properly as well. If you load up the HTML file in your browser, you should see a perfectly shaped cubed object. This effect was accomplished by using the proper skew and rotates values for the 3 sides of the cube that you can see.

Preview in Design View:
Preview in Design View

Preview in Browser:
Preview in Browser

As you can see, there wasn’t much at all involved in our 3D cube. We declared the 3 faces in our HTML file, and then we rotated and skewed them to the proper values in the CSS file. Combining this process with transforms, shadows, and other animation techniques can take this cube to the next level. Experiment and see what you can build. See you soon!

Download Source Files