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.

I just signed up at Server Intellect and couldn’t be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.

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:

Code Block
Ask a Question
Download Source
index.html
Including 3 Divs with unique IDs
<body>
    <div class="face top"></div>
    <div class="face left"></div>
    <div class="face right"></div>
</body>

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:

Code Block
Ask a Question
Download Source
style.css
Adding the 3D effect in our Cascading Style Sheet
.face{
	height:200px;
	overflow: hidden;
	position: absolute;
	width: 200px;
}
 
.top{
	background:#09f;
	border: 1px solid;
	top: 0px;
	left: 89px;	
	-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
	-moz-transform: rotate(-45deg) skew(15deg, 15deg);	
}
 
.left{
	border: 1px solid;
	top: 155px;
	left: 0px;
	background: #09f;
	-webkit-transform: rotate(15deg) skew(15deg, 15deg);
	-moz-transform: rotate(15deg) skew(15deg, 15deg);		
}
 
.right{
	border: 1px solid;
	top: 155px;
	left: 178px;
	background: #09f;
	-webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
	-moz-transform: rotate(-15deg) skew(-15deg, -15deg);	
}

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!

We stand behind Server Intellect and their support team. They offer dedicated servers, and they are now offering cloud hosting!

Download CSS3 3D Cube Source Files