Building a 3D Cube With HTML5 and CSS3

15ca6d8cfc0682e603c3eeeeaa224520

HTML5 and CSS3 bring some very cool additions to the web designer/developers tool kit. With the addition of more meaningful tagging in HTML5 (<header>,<nav>,<footer>, and more). Designers are given even more control to really build a site the way they envisioned. Today, I am going to show you how to create a 3D cube. The cube we are recreating is the logo for WebProNews.

To begin, we need to make three separate images. Make the image 100 pixels x 100 pixels. Add a light to dark blue gradient. Then select your text tool and as a W, P, and N to the center, one letter for each square. Then add a two pixel stroke to the edge on the squares. See below or you can just use the ones I created.

Now we have our images. Let’s move on the the CSS3 portion of this tutorial.

.cube {
	position: absolute;
	top: 100px;
	left: 100px;
}

Above is the full css file to build our cube. Now let’s break it down a bit. To begin we need to make a container for our cube. So we will call it “cube” for obvious reasons. You don’t need a height and width for this. Again I do not recommend absolute positioning but that is more a personal preference than anything, just make it more compliant for any monitor size.

.face {
	position: relative;
	width: 100px;
	height: 100px;
	overflow: hidden;
}

Next we need to build the global setting for each face of our cube. For this you will really need to use absolute positioning, it will make positioning our faces easier. Then you set the height and width to 100 pixels. Hiding the over flow will ensure that the image, if larger then the section will not distort our cube.

.top {
	top: 0;
	left: 89px;
	background: #ffffff;
	-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
	-moz-transform: rotate(-45deg) skew(15deg, 15deg);
}

Now we are going to add our formatting for the top box. Now we use the top and left to position the top image. Next we add a background color, you don’t really need to but it is more for good coding purposes. This last part is probably the most important. The new transform atribute. As more browser add CSS3 compatibility you will only need to call it transform. But for now -webkit- and -moz- are needed to make sure the formating displays correctly. Within transform we need to rotate our box 45 degrees counter clockwise. Then skew 15 degrees so it will match up with the other faces of the cube.

.left {
	top: 77px;
	left: 44px;
	background: #ffffff;
	color: #ffffff;
	-webkit-transform: rotate(15deg) skew(15deg, 15deg);
	-moz-transform: rotate(15deg) skew(15deg, 15deg);
}

The left face of the cube is set up nearly the same as the top. Only now we need to move it 77 pixels from the top of the container and 44 pixels left of the edge. Then we need to rotate the face 15° and skew the box like the top.

.right {
	top: 77px;
	left: 133px;
	background: #ffffff;
	color: #ffffff;
	-webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
	-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}

Next we need build a mirror of the left face with the right.

Now that we have our formating let’s take a look at the HTML. This was the easiest part of the whole set up.

<div class="cube">
	<div class="face top">
            <img src=".../WPN-P.png" width="100" height="100">
        </div>
	<div class="face left">
            <img src=".../WPN-W.png" width="100" height="100">
        </div>
	<div class="face right">
            <img src=".../WPN-N.png" width="100" height="100">
        </div>
</div>

This simple tells the HTML which images go where. Now let’s take a look at the final:

.cube {
position:relative;
top: 5px;
left: 50px;
}
.face {
position: absolute;
width: 100px;
height: 100px;
overflow: hidden;
font-family: monospace;
font-size: 24px;
}
.top {
top: 0;
left: 89px;
background: #ffffff;
color: #ffffff;
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
top: 77px;
left: 44px;
background: #ffffff;
color: #ffffff;
-webkit-transform: rotate(15deg) skew(15deg, 15deg);
-moz-transform: rotate(15deg) skew(15deg, 15deg);
}
.demoright {
top: 77px;
left: 133px;
background: #ffffff;
color: #ffffff;
-webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}

About the Author: