The impres­sion of a three dimen­sional cube can be cre­ated using mod­ern CSS tech­niques, with­out the need for JavaScript, imagery, can­vas or SVG. Using the pro­pri­etary trans­form prop­erty to skew and rotate shaded rec­tan­gles, indi­vid­ual cube faces can com­bine to form a 3D object. Cur­rently only sup­ported in recent WebKit and Gecko based browsers, most impor­tantly Fire­fox 3.5+ and Safari 3.2+.

<divclass="cube">
 <divclass="topFace">
 <div>
 Content
 </div>
 </div>
 <divclass="leftFace">
 Content
 </div>
 <divclass="rightFace">
 Content
 </div>
</div>

Create HTML codes first

A short dis­claimer, the geom­e­try in this exam­ple is 'fudged', in that the val­ues have been adjusted to appear roughly cor­rect. I know that the dimen­sions are slightly out of whack, this is merely to save my head from math­e­mat­ics and to get the con­cept out there quickly for peo­ple to see. With that said, let's crack on with the CSS.

Each of the three rec­tan­gles is given a slightly dif­fer­ent shade of gray to give the impres­sion of depth, in this exam­ple the left face is in shadow. The faces are each posi­tioned absolutely, rel­a­tive to the cube con­tainer. Each face is 200 x 200 pix­els, includ­ing 10 pix­els of padding.

.cube {
 position: relative;
 top:200px;
}

.rightFace,
.leftFace,
.topFace div {
 padding:10px;
 width:180px;
 height:180px;
}

.rightFace,
.leftFace,
.topFace {
 position: absolute;
}

and the CSS script for this

Now for the fun bit. The left and right rec­tan­gles are skewed by ±30˚ along the ver­ti­cal axis, with the right face shifted left by 200px, cleanly lin­ing up the two edges to cre­ate a cor­ner that is cen­ter aligned. 

.leftFace {
 -webkit-transform: skewY(30deg);
 -moz-transform: skewY(30deg);
 background-color:#ccc;
}

.rightFace {
 -webkit-transform: skewY(-30deg);
 -moz-transform: skewY(-30deg);
 background-color:#ddd;
 left:200px;
}

customizing left and right face

The top face proves more prob­lem­atic; it needs to be skewed, scaled, rotated and posi­tioned. The skew is the same, –30˚ along the ver­ti­cal axis, this skewed rec­tan­gle must then be rotated clock­wise by 60˚. Rotat­ing the rec­tan­gle itself leads to a change in ori­en­ta­tion of its con­tent, a con­tainer must be added and then rotated.

A sim­ple way of cre­at­ing a top face with­out resort­ing to maths is to dupli­cate the left and right rec­tan­gles, skew them in the oppo­site direc­tions (by invert­ing the sign, e.g. left face is now skewed by –30˚) and posi­tion them against the exist­ing faces to cre­ate a dia­mond shape between the two sets. Now use posi­tion­ing and scal­ing to fill this dia­mond and form the top face, delet­ing the dupli­cates when fin­ished. My results led to a scal­ing fac­tor of 1.16 in the Y direc­tion which I have accounted for by reduc­ing the font-size by the same factor. 

.topFace div {
 -webkit-transform: skewY(-30deg) scaleY(1.16);
 -moz-transform: skewY(-30deg) scaleY(1.16);
 background-color:#eee;
 font-size:0.862em;
}

.topFace {
 -webkit-transform: rotate(60deg);
 -moz-transform: rotate(60deg);
 top:-158px;
 left:100px;
}

adding topface styling for the cube

and that its. its done. Try it yourself. View the demo here.