Paul Hayes & FofR Online; web design portfolio and experiments

Update (July 21^st): Using newly released (cur­rently only in Web­kit Nightly releases) 3D trans­forms, a three dimen­sional, rotat­ing cube with cor­rect per­spect­ive is pos­sible, and as a bonus – the cube can be nav­ig­ated using arrow keys. Check out the latest demo, “Anim­ated CSS3 cube using 3D trans­forms”.

The impres­sion of a three dimen­sional cube can be cre­ated using mod­ern CSS tech­niques, without the need for JavaS­cript, imagery, can­vas or SVG. Using the pro­pri­et­ary trans­form prop­erty to skew and rotate shaded rect­angles, indi­vidual cube faces can com­bine to form a 3D object. Cur­rently only sup­por­ted in recent Web­Kit and Gecko based browsers, most import­antly Fire­fox 3.5+ -moz-transform (doc­u­ment­a­tion) and Safari 3.2+ -webkit-transform (doc­u­ment­a­tion).

To demon­strate the power of this effect a second exper­i­ment with mul­tiple cubes and pro­pri­et­ary Web­Kit trans­itions is also available.

Res­ults

A 3D cube cre­ated with CSS
Update (June 7^th): Altered CSS slightly to use skew(x,y) rather than skewY, the lat­ter of which is not sup­por­ted in Safari 3 / Chrome.
Sup­por­ted browsers: Safari 3.2+, Google Chrome, Fire­fox 3.5+

Exper­i­ment with mul­tiple cubes and CSS trans­itions, still no JavaS­cript
Sup­por­ted browsers: Safari 4+, Google Chrome

How To

Sim­ilar to my pre­vi­ous exper­i­ments, the HTML markup is very simple. Each of the faces has its own DIV, class and con­tent. The top face requires some extra markup to aid the trans­form­a­tion, more on that shortly.

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

A short dis­claimer, the geo­metry in this example is ‘fudged’, in that the val­ues have been adjus­ted 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­em­at­ics and to get the concept out there quickly for people to see. With that said, let’s crack on with the CSS.

Each of the three rect­angles is given a slightly dif­fer­ent shade of gray to give the impres­sion of depth, in this example the left face is in shadow. The faces are each posi­tioned abso­lutely, rel­at­ive to the cube con­tainer. Each face is 200 x 200 pixels, includ­ing 10 pixels of padding.

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

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

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

Now for the fun bit. The left and right rect­angles are skewed by ±30˚ along the ver­tical axis, with the right face shif­ted left by 200px, cleanly lin­ing up the two edges to cre­ate a corner 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;
}

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­tical axis, this skewed rect­angle must then be rotated clock­wise by 60˚. Rotat­ing the rect­angle itself leads to a change in ori­ent­a­tion of its con­tent, a con­tainer must be added and then rotated.

A simple way of cre­at­ing a top face without resort­ing to maths is to duplic­ate the left and right rect­angles, skew them in the oppos­ite dir­ec­tions (by invert­ing the sign, e.g. left face is now skewed by –30˚) and pos­i­tion them against the exist­ing faces to cre­ate a dia­mond shape between the two sets. Now use pos­i­tion­ing and scal­ing to fill this dia­mond and form the top face, delet­ing the duplic­ates when fin­ished. My res­ults led to a scal­ing factor of 1.16 in the Y dir­ec­tion which I have accoun­ted for by redu­cing 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;
}

The final CSS looks like this:

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

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

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

.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;
}

.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;
}